存储和从存储中检索状态

Question

我正在尝试将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")
);

我的rootReducer如下所示：

//Helper functions
import { validateLoginAttempt } from "../helpers/validateLoginAttempt";
const rootReducer = (state, action) => {
  switch (action.type) {
    case "login":
      const isLoggedIn = validateLoginAttempt(action.payload);
    default:
      console.log("default");
      break;
  }
};
export default rootReducer;

我定义了一个辅助函数validateLoginAttempt：

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()过程，在向 API 请求结束时，dispatch()我在rootReducer中定义的操作：

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

这个useCase的流程按预期工作，至少据我所知，该值存储在localStorage中(我认为这不是 Redux store？在我的另一个组件中，我正在尝试像这样检索userToken：

const userToken = useSelector(state => state.userToken);

这给了我一个error：

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

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

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

有人能让我走上正确的轨道，无法弄清楚这一点。

Answer 1

有多个问题，但最大的一个与化简器的基础知识有关：

化简器是一个纯函数，它采用上一个状态和一个动作，并返回下一个状态。

您不会从化简器返回任何内容(隐式return undefined(，从而导致类型错误Cannot read property 'userToken' of undefined.：

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

而"纯函数"意味着没有副作用，所以validateLoginAttempt里面的localStorage.setItem在减速器中没有位置，应该放在动作创建者里面：

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