Reactjs 使用中间件管理本地存储/cookie

在我的react redux应用程序上，我有管理令牌本地存储的登录操作

export function signInUserSuccess(token) {
  localStorage.setItem('token', token);
  return {
    type: SIGNIN_USER_SUCCESS,
    payload: {
      token: token
    }
  }
}

export function signOut() {
  localStorage.removeItem('token');
  return {
    type: SIGNOUT_USER
  }
}

并从index.js的本地存储中加载任何现有令牌

let token = localStorage.getItem('token');
if (token !== null) {
  store.dispatch(signInUserSuccess(token));
}

我知道在操作中使用

localStorage

不是一个好方法，这建议在中间件中处理它

---

查看其中一个中间件后，我不明白如何将

localStorage.setItem（）

、

localStorage.removietem（）

和

localStorage.getItem（）

替换为只使用

LOAD

和

SAVE

操作的给定中间件操作。我在设置软件包方面没有问题，但我不知道如何将其用于登录和注销操作。

我不熟悉redux存储，但我为自己编写了简单的中间件来处理此问题。如果您只执行示例中的操作，那么编写一个小型定制中间件可能比添加另一个依赖项更容易。例如：

localstorage.js

import { UPDATE_CODE, UPDATE_HISTORY } from '../actions/index';

export default function ({ dispatch }) {
  return next => action => {
    switch (action.type) {
      case UPDATE_CODE:
        localStorage.setItem('code', JSON.stringify(action.payload));
        break;
      case UPDATE_HISTORY:
        localStorage.setItem('history', JSON.stringify(action.payload));
        break;
    }
    next(action);
  };
}

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { Router, browserHistory } from 'react-router';
import LocalStorage from './middlewares/localstorage';

import reducers from './reducers';
import routes from './routes';

const createStoreWithMiddleware = applyMiddleware(LocalStorage)(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <Router history={browserHistory} routes={routes} />
  </Provider>
  , document.querySelector('.react-container'));

这是ES6语法。中间件的行为类似于Reducer，因为您可以关闭

操作。
next
是一个链接到所有中间件的函数，因此在完成中间件逻辑后，您可以将
操作
对象传递给它

然后在根目录/条目/任何文件中（并确保适应文件结构）：

index.js

import { UPDATE_CODE, UPDATE_HISTORY } from '../actions/index';

export default function ({ dispatch }) {
  return next => action => {
    switch (action.type) {
      case UPDATE_CODE:
        localStorage.setItem('code', JSON.stringify(action.payload));
        break;
      case UPDATE_HISTORY:
        localStorage.setItem('history', JSON.stringify(action.payload));
        break;
    }
    next(action);
  };
}

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { Router, browserHistory } from 'react-router';
import LocalStorage from './middlewares/localstorage';

import reducers from './reducers';
import routes from './routes';

const createStoreWithMiddleware = applyMiddleware(LocalStorage)(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <Router history={browserHistory} routes={routes} />
  </Provider>
  , document.querySelector('.react-container'));

从“React”导入React；
从“react dom”导入react dom；
从'react redux'导入{Provider}；
从“redux”导入{createStore，applyMiddleware}；
从“react Router”导入{Router，browserHistory}；
从“./middleware/LocalStorage”导入本地存储；
从“./reducers”导入减速机；
从“./routes”导入路由；
const createStoreWithMiddleware=applyMiddleware（LocalStorage）（createStore）；
ReactDOM.render(
，document.querySelector（'.react container'）；

您可以根据需要使中间件逻辑变得复杂，也可以编写多个（一个用于本地存储，一个用于cookie？）。动作贯穿于每个中间件。
感谢您的输入，这有助于我更好地理解定制中间件。我忘了提到这一点，但Dan Abramov有一套很棒的视频教程redux-有一个专门关于localStorage的教程：这很好，但您不会在任何地方阅读localStorage