react-redux及redux状态管理工具使用详解

 更新时间:2023年01月31日 12:00:15   作者:weixin_43993776  
Redux是为javascript应用程序提供一个状态管理工具集中的管理react中多个组件的状态redux是专门作状态管理的js库(不是react插件库可以用在其他js框架中例如vue,但是基本用在react中),这篇文章主要介绍了react-redux及redux状态管理工具使用详解,需要的朋友可以参考下

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
			})
		})
	}

到此这篇关于react-redux以及redux状态管理工具详解的文章就介绍到这了,更多相关react-redux状态管理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • React-Native中禁用Navigator手势返回的示例代码

    React-Native中禁用Navigator手势返回的示例代码

    本篇文章主要介绍了React-Native中禁用Navigator手势返回的示例代码,具有一定的参考价值,有兴趣的可以了解一下
    2017-09-09
  • React Fiber中面试官最关心的技术话题

    React Fiber中面试官最关心的技术话题

    这篇文章主要为大家介绍了React Fiber中面试官最关心的技术话题解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • 用React Native制作一个简单的游戏引擎

    用React Native制作一个简单的游戏引擎

    今天给大家分享的是使用React Native制作一个简单的游戏,这个游戏可以跨平台操作,本文通过实例图文相结合给大家介绍的非常详细,对React Native游戏相关知识感兴趣的朋友一起看看吧
    2021-05-05
  • ReactNative 之FlatList使用及踩坑封装总结

    ReactNative 之FlatList使用及踩坑封装总结

    本篇文章主要介绍了ReactNative 之FlatList使用及踩坑封装总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • React报错Type '() => JSX.Element[]' is not assignable to type FunctionComponent

    React报错Type '() => JSX.Element[]&apos

    这篇文章主要为大家介绍了React报错Type '() => JSX.Element[]' is not assignable to type FunctionComponent解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • react native reanimated实现动画示例详解

    react native reanimated实现动画示例详解

    这篇文章主要为大家介绍了react native reanimated实现动画示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 一篇文章介绍redux、react-redux、redux-saga总结

    一篇文章介绍redux、react-redux、redux-saga总结

    这篇文章主要介绍了一篇文章介绍redux、react-redux、redux-saga总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • 详解如何使用React Hooks请求数据并渲染

    详解如何使用React Hooks请求数据并渲染

    这篇文章主要介绍了如何使用React Hooks请求数据并渲染,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • useEffect如何通过form.getFieldValue(‘xxx‘)监听Form表单变化

    useEffect如何通过form.getFieldValue(‘xxx‘)监听Form表单变化

    这篇文章主要介绍了useEffect如何通过form.getFieldValue(‘xxx‘)监听Form表单变化问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • React + Node.js实现图片上传功能

    React + Node.js实现图片上传功能

    最近笔者在开发个人博客的后台管理系统,里面用到了图片上传相关的功能,在这里记录并分享一下,希望可以帮到大家,话不多说直接开始吧,感兴趣的朋友可以参考下
    2024-01-01

最新评论