React Redux Confusion

Question

Redux已经证明对我来说有点棘手，我想知道是否有人能够帮助我指出正确的方向，而我并没有抓住我想要的结果。 只是一个预警：我正在使用ES6语法。

好的，所以我已经安装了一些沙箱来测试REDX如何工作，这是我正在使用的当前文件设置。

-actions 
    --index.js 
-reducers 
    --index.js 
    --reducer_user.js 
-containers 
    --ReduxTest.js 

在我的容器ReduxTest.js中，我有以下代码。

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { fetchUser } from '../actions/index'; 

class ReduxTest extends Component { 
    render() { 
    return (
     <div> 
     {console.log(this.props.fetchUser())} 
     {console.log(this.props.user)} 
     </div> 
    ) 
    } 
} 

export default connect(null, { fetchUser }) (ReduxTest); 

当我渲染ReduxTest.js到屏幕上，第一个发言的console.log显示为，

​​

第二个结果则显示为“不确定”。

这里是我的行动index.js看起来像，

export const FETCH_USER = 'FETCH_USER'; 

export function fetchUser() { 
    const testing = "This is just a test."; 
    return { 
    type: FETCH_USER, 
    payload: testing 
    } 
} 

这里是我的reducer_user.js文件

import { FETCH_USER } from '../actions/index'; 

export default function(state = null, action) { 
    switch(action.type) { 
    case FETCH_USER: 
    return action.payload; 
    } 
    return state; 
} 

和终于，这里是我在减速index.js文件夹

import { combineReducers } from 'redux'; 
import UserReducer from './reducer_user'; 

const rootReducer = combineReducers({ 
    user: UserReducer 
}); 

export default rootReducer; 

我使用的是来自Udemy的视频教程，所以那是我得到我的一些语法的地方，而不是什么。我的印象是，我可以从index.js减速器访问“this.props.user”，但我做错了事，或者错过了一个步骤。任何帮助，将不胜感激。

就这样我清楚，我的所有意图是，成功让ReduxTest容器控制台记录JUST有效负载中的字符串。如果你能为此提供帮助，我想我可以从那里继续。谢谢=）

Answer 1

你只是将动作创建者传递给你的组件。如果你想访问你的props.user比你必须提供它。你可以通过connect函数的第一个参数来实现。

const mapStateToProps = state => ({ 
    user: state.user, 
}); 

export default connect(mapStateToProps, { fetchUser })(ReduxTest); 

connect的第一个参数必须是可调用的函数。这个函数的唯一参数是当前状态。该函数必须返回一个对象，其中包含要在组件内访问的所有属性。

请注意，用户缩减器的状态最初设置为空。 Redux激发了多重内部行为。如果您在渲染方法中记录当前状态，则可能发生，您的状态在之前被记录为，您正在调用您自己的操作。这可能会让人困惑。

你可以改变你减速的初始状态是这样的：

import { FETCH_USER } from '../actions/index'; 

export default function(state = 'User not fetched yet', action) { 
    switch(action.type) { 
    case FETCH_USER: 
     return action.payload; 
    } 

    return state; 
}