Reactjs 从存储中存储和检索状态

我正在尝试将

userToken

保存在Redux存储中并检索它。在我的

index.js

中，我用

Provider

包装我的

App

，它将

store

作为道具：

import { createStore } from "redux";
import { Provider } from "react-redux";
import rootReducer from "./reducers/rootReducer";

const store = createStore(rootReducer);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

我已经定义了一个助手函数

validateLogInTest

：

export const validateLoginAttempt = payload => {
  if (typeof payload.data.token !== "undefined") {
    //Saves in localstorage correctly.
    localStorage.setItem("userToken", payload.data.token);

    return true;
  }

  return false;
};

在我的一个功能组件中，我有一个

fetch（）

const dispatch = useDispatch();
<...>
.then(data => {
  dispatch({ type: "login", payload: { data } });
  history.push("/");
})

这给了我一个
错误
：

Error: An error occured while selecting the store state: Cannot read property 'userToken' of undefined.

如果我尝试在我的
App
组件中按如下方式
getStore
，我会得到
storeundefined
：

const store = useStore();
console.log("store", store.getState());

有人能帮我找到正确的方向吗？我无法解决这个问题。
有多个问题，但最大的问题是：

reducer是一个纯函数，它接受前一个状态和一个动作，返回下一个状态

您不从reducer返回任何内容（隐式地
返回undefined
），因此导致TypeError
无法读取undefined的属性“userToken”。
：

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

而“纯函数”意味着没有副作用，因此
localStorage.setItem
内部
validateLogInTest
在减速机中没有位置，应该放在action creator中：

const dispatch = useDispatch();
...
.then(data => {
  const isLoggedIn = validateLoginAttempt(data);
  if (isLoggedIn) {
    dispatch({ type: "login", payload: { data } });
    history.push("/");
  } else {
    console.error("not logged in")
  }
})

非常感谢。除了
返回{…状态之外，userToken:action.payload.data.token}。从存储中删除相同的
userToken
的正确方法是什么？类似于
case'logout'：返回{…state，userToken:null}
const initialState = {};
const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case "login": {
      return {...state, userToken: action.payload.data.token};
    }
    default:
      return state;
  }
};

const dispatch = useDispatch();
...
.then(data => {
  const isLoggedIn = validateLoginAttempt(data);
  if (isLoggedIn) {
    dispatch({ type: "login", payload: { data } });
    history.push("/");
  } else {
    console.error("not logged in")
  }
})