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()，它可以在localStorage中节省userToken。

现在在我的另一个组件中，它侦听另一个路由，我注册了这样的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