日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

react-redux及redux狀態管理工具使用詳解_React

作者：weixin_43993776 ? 更新時間： 2023-03-28 編程語言

react-redux使用及原理

1、下載 react-redux redux redux-thunk三個依賴包

yarn add react-redux  redux  redux-thunk

2、配置store對象，用來管理全局狀態

import { createStore, combineReducers, applyMiddleware } from "redux"

// redux-thunk中間件，用來處理異步傳值的方法
import reduxThunk from "redux-thunk"

import Reducer1 from "./reducer/Reducer1"
import Reducer2 from "./reducer/Reducer2"
import Reducer3 from "./reducer/Reducer3"

// combineReducers方法用來合并reducer,將reducer分開，便于管理
const reducer = combineReducers({
    Reducer1,
    Reducer2,
    Reducer3,
})

// 創建store對象，并將其暴露出去
const store = createStore( reducer, applyMiddleware(reduxThunk) )

export default store

3、創建reducer.js文件， reducer文件主要是用來處理改變store狀態里面的值

const reducer1 = (prevState = { num: 10 }, action) => {
    let newState = { ...prevState }
    switch(action.type) {
        case "TYPE1":
            newState.num = action.value
            return newState
        default:
            return prevState
    }
}

export default reducer1

4、在入口文件index.js中引入provider，并包裹在App根組件外，其中的store就是創建的store對象

import React from 'react';
import ReactDOM from 'react-dom/client';

import { Provider } from "react-redux"

import App from './studyReactRedux/App';

import "./static/main.css"
import store from "./studyReactRedux/reactRedux/index";


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Provider store = { store }>
        <App></App>
    </Provider>
)

至此在react所有的組件中都有了store對象，方便存取全局狀態了

接下來就是在組件中存值取值了

1、在組件中取值

  <div> {props.num} </div>
  const matStateToProps = (state) => {
        return {
             num: state.Reducer1.num
        }
   }
  export default connect(matStateToProps, mapDispatchToProps)(Home)

2、組件中存值（同步）

const handleClick = (val) => {
	props.changeVal(val)
}

<button onClick={ () => handleClick('同步傳過去的值') }>同步存值</button>

const mapDispatchToProps = {
    changeVal(val) {
         return {
              type: 'TYPE1',
              value: val
          }
    }
}
export default connect(matStateToProps, mapDispatchToProps)(Home)

3、組件中存值（異步）

const handleClick = (val) => {
	props.changeVal(val)
}

<button onClick={ () => handleClick('同步傳過去的值') }>同步存值</button>

const mapDispatchToProps = {
    changeVal(val) {
         return (dispatch) => {
              setTimeout(()=> {
					dispatch({
						type: 'TYPE1',
						value: val
					})
              }, 300)
         }
    }
}
export default connect(matStateToProps, mapDispatchToProps)(Home)

react-redux持久化


// 持久化可以自己在存狀態的時候自己往local  session里面存值，借助redux-persist庫
// 1、下載redux-persist
yarn add redux-persist

// 2、修改 store文件
 /**
 *
 *      react-redux的使用步驟
 *
 *          1、引入react-redux  和  redux  和  redux-thunk
 *
 *          2、index.js中引入 import { Provider } from "react-redux"
 *
 *          3、在根組件中App外面包上一層  <Provider store={ store }></Provider>, 其中store就是redux中創建的store對象
 *
 *          4、在組件中使用connect( (state)=>{
 *              return { state: state.xxxReducer.xxx }
 *          } )(App)
 *          其中的 connect 是從 react-redux 中解構出來的    import { connect } from "react-redux"
 *          connect函數中有兩個參數： 第一個是從store狀態中取值的，第二個是dispatch傳值的
 *
 *          詳細見home中的child1給child2傳值， child2給child1傳值
 */

import { createStore, combineReducers, applyMiddleware } from "redux"

import reduxThunk from "redux-thunk"


import {persistStore, persistReducer} from 'redux-persist'
import storage from 'redux-persist/lib/storage'

import Reducer1 from "./reducer/Reducer1"
import Reducer2 from "./reducer/Reducer2"
import Reducer3 from "./reducer/Reducer3"

const persistConfig = {
    key: 'item',
    storage,
    whitelist: ['Reducer1']  // 表示只持久化 Reducer1的值  blacklist: ['Reducer2'] 表示不持久化Reducer2
}

const reducer = combineReducers({
    Reducer1,
    Reducer2,
    Reducer3,
})

const myPersistReducer = persistReducer(persistConfig, reducer)

const store = createStore(myPersistReducer, applyMiddleware(reduxThunk))

const persistor = persistStore(store)

export { store, persistor }



// 3、修改入口文件 index.js
import React from 'react';
import ReactDOM from 'react-dom/client';

import { Provider } from "react-redux"

import App from './studyReactRedux/App';

import "./static/main.css"
import { store, persistor } from "./studyReactRedux/reactRedux/index";

import {PersistGate} from 'redux-persist/integration/react'

import { HashRouter } from "react-router-dom"


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Provider store = { store }>
        <PersistGate loading={null} persistor={persistor}>
        	<HashRouter>
            	<App></App>
           	</HashRouter>
        </PersistGate>
    </Provider>
)

不管是同步改狀態還是異步改狀態，只要dispatch就會發布action動作到store對象中，store交給reducer來處理修改響應的狀態，從而達到了解耦的效果

redux的使用詳解

redux是原生js實現的，和react沒有直接的關系，使用起來相對react-redux稍微麻煩點，需要使用人員自己動手進行消息訂閱和取消訂閱

配置store對象和react-redux一樣，見上面配置文件，只是不需要在App根組件中注入provider供應商
在使用的過程中不太一樣，沒有connect高階組件

1、組件中取值

// 其中的store就是引入的store對象
const [val, setVal] = useState(store.getState().Reducer1.num)  // 取store中的初始值

useEffect(()=>{
	// 訂閱消息，當store中的值發生改變的時候就會走到此方法里面來
	const unsubscibe = store.subscribe(() => {
		setVal(store.getState().Reducer1.num)
	})
	return() => {
		// 取消訂閱
		unsubscibe()
	}
}, [])

<div>{val}</div>

2、組件中存值（同步）

handleClick(val) {
	store.dispatch({
		type: 'TYPE1',
		value: val
	})
}

3、組件中存值（異步）

	handleClick(val) {
		store.dispatch((dispatch) => {
			dispatch({
				type: 'TYPE1',
				value: val
			})
		})
	}

原文鏈接：https://blog.csdn.net/weixin_43993776/article/details/126504225

欄目分類
最近更新