Redux 存储不更新

Question

我有一个关注 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);
})

我确定我的 rootReducer 的 login 案例会被调用，因为我可以在其中 console.log() 并将 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 ''  
  });
  <...>

编辑：为了测试，我在 LoginForm 中实现了 mapStateToProps，在 useEffect():

中实现了 console.log

useEffect(() => {
  console.log(props);
});

在表单提交时，userToken 值正确保存在 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 存储不更新

Redux store not updating

reactjs

react-redux

react-hooks