Redux 和 Redux Persist基本介绍与範例

Redux

基本步骤

安装套件

npm i @reduxjs/toolkit react-redux
redux toolkit是封装过，更好的redux，而react-redux是让元件和redux沟通的工具

设置slice档案，里头包含

slice 它是Redux reducers和actions的集合action 它是物件，他包含资讯的内容(payload)。是更新 Redux store的唯一资讯来源reducers 它是函式，根据传递给它的actions，用来表示state会如何改变export action creator 它是函式，目的是会回传一个具有适当 type 和 payload 属性的action物件，然后可以将其发送到 store 以触发相应的 reducer 函式export root reducer

设置store档案

到store里设定configureStore，建立redux store

读取或更新Redux store中的资料

在你需要的地方使用useDispatch和useSelector做操作

实际範例
若要在网页中使用 Redux 管理电商网站里 cartItems 的状态，可以使用 Redux Toolkit 中的 createSlice 函式。

下面举例说明如何创建管理 cartItems 状态的 cartSlice ：

import { createSlice } from '@reduxjs/toolkit';const cartSlice = createSlice({  name: 'cart',  initialState: {    cartItems: [],  },  reducers: {    addItem: (state, action) => {      state.cartItems.push(action.payload);    },    removeItem: (state, action) => {      state.cartItems = state.cartItems.filter(        item => item.id !== action.payload.id      );    },  },});export const { addItem, removeItem } = cartSlice.actions; //action creatorsexport default cartSlice.reducer; //root reducer

在範例中，我们用 createSlice 创建了 cartSlice。将一个object传递给 createSlice，定义slice的名称、初始状态和其 reducers。我们定义了两个 reducers，addItem 和 removeItem，这让我们对购物车添加和删除项目。

创建slice后，就可以将reducer 传递给 Redux Toolkit 的 configureStore 函式以创建 Redux store。

import {configureStore } from '@reduxjs/toolkit';import cartReducer from './cartSlice';const store = configureStore({  reducer: {    cart: cartReducer,  },});export default store;

最后，可以使用 react-redux 中的 useSelector 在组件中访问 cartItems 的状态。或是用useDispatch来更新Redux store中的state

import React from 'react';import {useSelector,useDispatch } from 'react-redux';import {addItem} from "./cartSlice"const Cart = () => {  const cartItems = useSelector(state => state.cart.cartItems);    const newItem = {id:1,name:"Apple"}  const dispatch = useDispatch();  dispatch(addItem(newItem))  // ...};

Redux Persist

Redux Persist 是一个library，它允许你将 Redux store中的资料保存在能长久储存的空间中，例如浏览器的localStorage，这样即使在浏览器刷新或关闭后也能保留应用程序的state。

基本步骤

npm install redux-persist在 Redux store 中，新增 Redux Persist 到 Redux store，并创建一个persistConfig object，指定 Redux Persist 的key和storage option 。key应该是独一无二的，而存储选项可以设置成 storage存在localStorage。将 persistConfig 和root reducer 作为参数传入 persistReducer 函式，以定义persistedReducer。将root reducer 传递给 configureStore 函式。最后使用 persistStore 函式来创建一个 persistor。到这里Redux store就算设置完成

import { configureStore } from '@reduxjs/toolkit';import { persistStore, persistReducer } from 'redux-persist';import storage from 'redux-persist/lib/storage';import rootReducer from './reducers';const persistConfig = {  key: 'root',  storage,};const persistedReducer = persistReducer(persistConfig, rootReducer);export const store = configureStore({  reducer: persistedReducer,});export const persistor = persistStore(store);

回到你的root component中，设置 PersistGate 元件来包裹我们的的应用程式，并将 persistor 作为 prop 传入

在React root component (通常是index.js)使用 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';const root = createRoot(document.getElementById("root"));root.render(    <Provider store={store}>      <PersistGate persistor={persistor}>        <App />      </PersistGate>    </Provider>);

以上就是Redux和Redux-persist的基本操作

参考文章:

redux-toolkit

以上若有任何错误或建议，都欢迎留言给我，谢谢