redux状态管理

什么是redux？

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。它最大的特点就是，它通过一个单一的 store 来管理整个应用的状态，并且只允许通过纯函数来修改状态。

为什么要用redux？

Redux 最大的优点就是它提供了一种统一的状态管理方案，使得应用中的状态管理变得更加简单、可预测。

如何使用redux？

Redux 主要有以下几个步骤：

1. 创建一个 Redux store
2. 定义 action 类型和 action 创建函数
3. 使用 action 创建函数创建 action
4. 使用 Redux store 订阅 state 的变化
5. 使用 Redux store 提交 action 触发 state 的变化

示例

下面是一个使用 Redux 管理计数器的示例：

// 创建 Redux store
import { createStore } from "redux";

// 定义 action 类型
const INCREMENT = "INCREMENT";
const DECREMENT = "DECREMENT";

// 定义 action 创建函数
function increment() {
  return { type: INCREMENT };
}


function decrement() {
  return { type: DECREMENT };
}

// 创建 Redux store
const store = createStore(function(state = 0, action) {
  switch (action.type) {
    case INCREMENT:
      return state + 1;
    case DECREMENT:
      return state - 1;
    default:
      return state;      
  }
});

// 订阅 state 的变化
store.subscribe(() => console.log(store.getState()));

// 提交 action 触发 state 的变化
store.dispatch(increment()); // 1
store.dispatch(increment()); // 2
store.dispatch(decrement()); // 1

在这个示例中，我们创建了一个 Redux store，并定义了两个 action 类型和两个 action 创建函数。然后我们订阅了 Redux store 的变化，并提交了两个 action，从而触发了 state 的变化。最后，我们打印了 Redux store 的当前状态。

总结

Redux 是一个 JavaScript 状态容器，它提供了可预测化的状态管理。它通过一个单一的 store 来管理整个应用的状态，并且只允许通过纯函数来修改状态。通过 Redux，我们可以更容易地管理应用的状态，并使得状态的变化可预测。

结合reducers使用

// 创建 Redux store
import { createStore } from "redux";

// 定义 action 类型
const INCREMENT = "INCREMENT";
const DECREMENT = "DECREMENT";


// 定义 action 创建函数
function increment() {
  return { type: INCREMENT };
}


function decrement() {
  return { type: DECREMENT };
}


// 定义 reducer 函数
function counter(state = 0, action) {
  switch (action.type) {
    case INCREMENT:
      return state + 1;
    case DECREMENT:
      return state - 1;
    default:
      return state;      
  }
}

// 创建 Redux store
const store = createStore(counter);


// 订阅 state 的变化
store.subscribe(() => console.log(store.getState()));

// 提交 action 触发 state 的变化  
store.dispatch(increment()); // 1
store.dispatch(increment()); // 2
store.dispatch(decrement()); // 1

在这个示例中，我们创建了一个 Redux store，并定义了两个 action 类型和两个 action 创建函数。然后我们定义了一个 reducer 函数，它接收 state 和 action，并返回新的 state。最后，我们创建了一个 Redux store，并订阅了 Redux store 的变化，并提交了两个 action，从而触发了 state 的变化。最后，我们打印了 Redux store 的当前状态。

通过使用 reducer，我们可以将多个 reducer 组合成一个大的 reducer，从而实现更复杂的状态管理。

参考

• Redux 官网
• Redux 中文文档

redux持久化

使用 redux-persist 库来自动处理状态的持久化和恢复。 可以自定义存储和恢复逻辑，例如手动将状态序列化并保存到本地存储中。

import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // 默认使用 localStorage
import rootReducer from './reducers';

// 定义持久化配置
const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['user', 'cart'], // 指定需要持久化的 reducer 名称
};

// 使用 persistReducer 包装 rootReducer
const persistedReducer = persistReducer(persistConfig, rootReducer);

// 创建 store
const store = createStore(persistedReducer);

// 创建 persistor
const persistor = persistStore(store);

使用 PersistGate 组件来延迟渲染应用，直到状态恢复完成。

import React from 'react';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { store, persistor } from './store';
import App from './App';

function Root() {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
  );
}

export default Root;