Question

我有以下header('P3P: CP="IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT"');，应该在商店内添加rootReducer：

userToken

在我的const initialState = { userToken: "" }; const rootReducer = (state = initialState, action) => { switch (action.type) { case "login": { localStorage.setItem("userToken", action.payload.token); return { ...state, userToken: action.payload.token }; } case "logout": { } default: return state; } }; export default rootReducer;组件中，我定义LoginForm如下：

mapDispatchToProps

并使用const mapDispatchToProps = dispatch => { return { saveUserToken: token => { dispatch({ type: "login", payload: token }); } }; };导出我的组件（我通过connect()，因为这里没有null）

mapStateToProps

我在组件内部调用它：

export default connect(
  null,
  mapDispatchToProps
)(LoginForm);

我确信我的.then(data => { props.saveUserToken(data); })的{{1}}案例会被调用，因为我可以rootReducer放入其中，并将login保存在console.log()中。 / p>

现在，在我的另一个侦听另一条路线的组件中，我这样注册userToken：

localStorage

在mapStateToProps内部，我定义如下：

const mapStateToProps = state => {
  return {
    userToken: state.userToken
  };
};

<...>

export default connect(mapStateToProps)(ServerList);

在ServerList钩中，我尝试进行const ServerList = ({ userToken }) => {}。我得到的是空字符串。有什么问题吗？

useEffect

编辑：为了进行测试，我在console.log(userToken);内实现了const ServerList = ({ userToken }) => { useEffect(() => { console.log(userToken); //returns '' }); <...>，并在mapStateToProps内实现了LoginForm：

console.log

在表单提交时，useEffect()的值已正确保存在useEffect(() => { console.log(props); });内，但是如果我重新加载页面，userToken会再次设置为空字符串。

Answer 1

当您重新加载页面时，您在redux存储中的数据将恢复为初始值。如果您希望在重新加载页面时保留数据，则可以使用redux-persist。

Answer 2

尝试一下

const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case "login": {
      localStorage.setItem("userToken", action.payload.token);
      return Object.assign({}, state, { userToken: action.payload.token })
    }
    case "logout": {
    }
    default:
      return state;
  }
};

export default rootReducer;

使用Object.assign

Redux存储未更新

2 个答案: