Question

我是Redux的新手，当我们有多个Reducer时，我对于如何从Redux Store获取State感到困惑。说这是我的CombineReducer

import apiCallInProgress from './ApiStattusReducer'; 
import login from './loginReducer';

const rootReducer = combineReducers({
    login,
    apiCallInProgress
});

export default rootReducer;

// below is my Login Reducer
const initialState = {
    isAuthenticated: false,
    user: {}

};
export function loginReducer(state = initialState, action = {}) {
    console.log(action.user);
    switch (action.type) {
        case types.SET_CURRENT_USER:
            return {
                ...state,
                isAuthenticated: true,
                user: action.user
            }
        default:
            return state
    }

}
export default loginReducer;

// now I want to access  user from my component,
// I wrote as  
function mapStateToProps(state) {
    return {
        login: state.login
    }
}
componentDidMount() {
    const { login } = this.props
    console.log("set user didmount:" + login.user)
}
componentDidUpdate() {
    const { login } = this.props
    console.log("set user didupdate:" + login.user)

}

我无法获得组件中用户的状态，但是当我按下登录按钮console.log（action.user）时，它会在控制台中显示正确的输出。
我们在CombineReducer内部提到的变量名称，我需要在mapStateToProps函数内部使用相同的名称来获取状态。我很困惑。有人请解释。

Answer 1

我认为您一直在做所有事情，直到找到组件为止（尽管如果不实际测试代码就很难完全确定）。据我所知，主要的问题是您实际上并未分派动作，因此从未设置login.user。

react-redux的labels方法有两个函数参数-mapStateToProps（您正在正确使用）和mapDispatchToProps（您似乎没有在使用）

mapDispatchToProps是一种将Redux动作传递给props的方法，该属性在被调用时将触发该动作，然后由reducer拾取该动作，并将返回一个新的状态对象。在应用程序的根目录中创建一个名为actions的新目录。在其中创建一个名为loginActions.js的文件，并在其中放置类似以下内容的文件：

export function setCurrentUser(user) {
  return (dispatch) => {
    dispatch({ type: 'SET_CURRENT_USER', user)
  }
}

将此函数导入到您的组件中，然后在connect函数中，添加mapDispatchToProps

import { connect } from 'react-redux'
import { setCurrentUser } from './actions/loginActions'

// component code 

const mapDispatchToProps = {
  setCurrentUser: setCurrentUser
}

const mapStateToProps = (state) => {
    return {
        login: state.login
    }
}

connect(mapStateToProps, mapDispatchToProps)(YourComponentName)

现在，您可以在componentDidMount方法中调用此操作：

componentDidMount() {
  this.props.setCurrentUser('myUser')
}

在componentDidUpdate中，该用户现在应该可以使用：

componentDidUpdate(prevProps) {
  if (prevProps.login !== this.props.login) {
    console.log(this.props.login)
  }
}

我希望这会有所帮助。让我知道您是否需要更多帮助。

使用Redux时如何在Component中获取更新的状态

1 个答案: