redux的使用

目录

1、redux使用和持久化

第一步：使用redux

第二步：使用react-redux简化步骤

第三步：持久化store

---

1、redux使用和持久化

第一步：使用redux

   // 安装redux 状态管理
   npm i redux

1、store文件夹下 index.ts 文件

import { createStore } from 'redux'

// 导入reducer
import reducer from './reducer'

// 实例化仓库
export default createStore( reducer )

2、store文件夹下 reducer.ts

var initialState = {
    userInfo:{}
}

export default function reducer( state = initialState, action:any ){
    var newstate = JSON.parse( JSON.stringify( state ) );
    
    // 判断action的类型
    if( action.type == 'SAVE_USERINFO' ){
        newstate.userInfo = action.payload;
    }else if( action.type == ''){
        // ...
    }else{
        return state;
    }
    
    // 返回一个全新的state
    return newstate
}

第二步：使用react-redux简化步骤

// 安装
npm i react-redux

// 根组件内导入Provider
import { Provider } from 'react-redux'

// 导入store
import store from './store'

// 包裹根组件, 属性必须写
	<Provider store={store}>
        <App />
	</Provider>

第三步：持久化store

// 安装持久化插件
npm i redux-persist

1、store下的index.ts

// 在store下的index.ts导入两个方法
import { persistReducer, persistStore } from 'redux-persist'
import storage from 'redux-persist/lib/storage'

// 持久化reducer
var persisteReducer = persistReducer( { key:'redux', storage }, reducer )

// 重新实例化仓库
var store = createStore(persisteReducer)

// 持久化store
var persistor = persistStore( store )

// 导出
export default store;  // 默认导出只能用一次
export { persistor }   // 可以使用多次

2、根组件导入 并包裹根组件

// 根组件导入  并包裹根组件
import { PersistGate } from 'redux-persist/integration/react'
import { persistor } from './store'

	<Provider store={store}>
		<PersistGate persistor={persistor}>
			<App />
		</PersistGate>
	</Provider>

//最后，在组件内使用，导入 useDispatch

var dispatch = useDispatch()

dispatch({type:'SAVE_USERINFO', payload:res.data.data})

//    最后，在组件内使用，导入 useDispatch

        var dispatch = useDispatch()

        dispatch({type:'SAVE_USERINFO', payload:res.data.data})