reactjs - 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 ''  
  });
  <...>

编辑：为了测试，我mapStateToProps在我的内部实现LoginForm并console.log在内部实现useEffect()：

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

在表单提交时，userToken值被正确保存在里面props，但是如果我重新加载页面，userToken再次设置为空字符串。

标签： reactjsreact-reduxreact-hooks

Answer 1

像这样试试

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