React(六) —— redux(react+)

React(六) —— redux

推荐整理分享React(六) —— redux(react+)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:react+,react reducer详解,react+,react reduct,react+,react reduct,react reducer,react+,内容如对您有帮助，希望把文章链接给更多的朋友！

🧁个人主页：个人主页

✌支持我 ：点赞👍收藏🌼关注🧡

文章目录⛳Redux🍆redux定义💐redux使用原则🍰redux使用场景🧊redux工作流程🥫redux基本创建store定义改变数据的actions,并在renducer函数中对对应的action作出不同的操作离开或到达Detail页面，触发相应的actions订阅store,更新状态到页面上🍸补充(actioncreator)🍫redux核心reducer合并redux中间件redux-thunkredux-promise⛳Redux

redux最主要是用作应用状态的管理。简言之，Redux用一个单独的常量状态树（state对象）保存这一整个应用的状态，这个对象不能直接被改变。当一些数据变化了，一个新的对象就会被创建（使用actions和reducers）这样就可以进行数据追踪。

🍆redux定义

Redux 是一个使用叫做“action”的事件来管理和更新应用状态的模式和工具库。它以集中式Store（centralized store）的方式对整个应用中使用的状态进行集中管理，其规则确保状态只能以可预测的方式更新。

💐redux使用原则

🔎🔎🔎

state以单一对象存储在store对象中state只读（每次都返回一个新的对象）使用纯函数reducer执行state更新

🍰redux使用场景

🏸🏸🏸

同一个state需要在多个Component中共享需要操作一些全局性的常驻Component,如Tooltips等太多props需要在组件树中传递，其中大部分只是为了传给子组件业务太复杂导致Component文件太大，可以考虑将业务逻辑拆出来放到Reducer中🧊redux工作流程

📢📢📢

组件通过dispatch方法触发Action（type+payload载荷）Store接收Action并将Action分发给ReducerReducer根据Action类型对状态进行更改并将更改后的状态返回给Store组件订阅了Store中的状态，Store中的状态更新会同步到组件🥫redux基本创建store

redux文件夹下的store.js

//1.引入redux,//2.createStore(reducer)import {createStore} from 'redux'const reducer = (preState,action)=>{ return prevState}const store = createStore(reducer);export default store定义改变数据的actions,并在renducer函数中对对应的action作出不同的操作//store.js 第二个参数为操作的actionsconst reducer = (prevState={ show:true, //...初始状态值},action)=>{ console.log(action); let newStare = {...prevState} switch(action.type){ case 'hide-tabbar': newStare.show = false console.log(newStare.show); return newStare.show case 'show-tabbar': newStare.show = true console.log(newStare.show); return newStare.show default: return prevState }}离开或到达Detail页面，触发相应的actions//Detail.jsimport {show,hide} from '../../redux/actionCreator/TabbarActionCreator'useEffect(()=>{ //store.dispatch 通知 store.dispatch(hide()) return()=>{ // console.log('destroy'); store.dispatch(show()) } },[]).............................................//actionCreator文件夹下TabbarActionCreator.jsfunction hide(){ return { type:'hide-tabbar' }}function show(){ return { type:'show-tabbar',//必须有type值 //payload:'需要传的值' }}export {show,hide}订阅store,更新状态到页面上//App.js中state = { isShow:store.getState() } //store.subcribe 订阅 componentDidMount(){ store.subscribe(()=>{ console.log('app中订阅',store.getState()); this.setState({ isShow:store.getState().show }) }) } //store.subcreibe 订阅 render() { return ( <div> <MRouter> {this.state.isShow && <Tabbar></Tabbar>} </MRouter> </div> )}

获得store中的状态，根据状态的不同来控制Tabbar的显示或隐藏

🍸补充(actioncreator)

action creator是一个函数，用于生成一个action对象，他接受一个或多个参数（任何类型的数据），但是必须在action对象中有一个type属性：描述操作的类型。action creator函数返回一个对象，该对象是一个action,这个action对象包含了描述操作的数据

function addTodo(text){return{type:'add_todo'}}..............................store.dispatch(addTodo())

上述：addTodo是一个action creator函数，它接受一个text参数并返回一个包含type和text属性的action对象。在Redux中，我们可以使用dispatch函数将这个action对象发送到store中，以便更新store状态。

🍫redux核心

getState：获取状态

store.getState()

subscribe：订阅状态

store.subscribe(()=>{})

dispatch：触发Action

store.dispatch({type:'description...'})reducer合并

🚀如果不同的action所处理的属性之间没有联系，我们可以把Reducer函数拆分。不同的函数负责处理不同属性，最终把他们合并成一个大的Reducer,并且抛出在store内的文件中引入。

redux文件夹下CityReducer.js

创建多个reducer,分别管理不同的数据

const CityReducer = (prevState={ cityName:'北京'},action)=>{ let newStare = {...prevState} switch(action.type){ case 'change-city': newStare.cityName = action.payload return newStare default: return prevState }}export default CityReducer

store.js

使用combinReducers方法合并多个Reducer。combinReducers方法可以吧多个reducer合并成一个reducer,以便在创建store实例时使用

import {combineReducers, createStore} from 'redux'import CityReducer from './reducers/CityReducer';import TabbarReducer from './reducers/TabbarReducer';const reducer = combineReducers({ CityReducer, TabbarReducer})const store = createStore(reducer);export default storeredux中间件

在redux里,action仅仅是携带了数据的普通js对象,action creator返回的值是这个action类型的对象，然后通过store.dispatch()进行分发。同步的情况下一切都很完美，但是reducer无法处理异步的情况。

那么我们就需要action和reducer中间架起一座桥梁来处理异步。这就是middleware

redux-thunk

作用

🚒让我们的action创建函数不仅仅返回一个action对象，也可以返回一个函数，这个函数会接受dispatch和getState两个参数，我们可以在函数内部进行 异步操作 ，然后再通过dispatch发出一个新的action对象，来更新应用的状态

安装redux-thunk

npm i --save react-thunk

引入

import {applyMiddleware, combineReducers, createStore} from 'redux'import reactThunk from 'redux-thunk'const reducer = combineReducers({ .....})const store = createStore(reducer,applyMiddleware(reactThunk));export default store

使用方法

import getCinemsListAction from '../redux/actionCreator/getCinemsListAction'store.dispatch(getCinemsListAction())...............................import axios from "axios"function getCinemasListAction(){ return(dispatch)=>{ axios({ ........ }).then(res=>{ console.log(res.data.data.cinemas); dispatch({ type:'change-list', payload:res.data.data.cinemas }) }) }}export default getCinemasListAction

注意:

当我们使用react-thunk中间件时，他会判断action是否为函数，如果是函数就执行这个函数，并在函数内部发出一个新的action对象，若不是则按照正常进行

取消订阅

//订阅 var unsubcribe=store.subscribe(()=>{ }) return ()=>{ //取消订阅 unsubcribe() } },[])redux-promise

安装redux-promise

npm i redux-promise

引入

import {applyMiddleware, combineReducers, createStore} from 'redux'import reactThunk from 'redux-thunk'import reactPromise from 'redux-promise'const reducer = combineReducers({ ....})const store = createStore(reducer,applyMiddleware(reactThunk,reactPromise));export default store

使用方法

import getCinemsListAction from '../redux/actionCreator/getCinemsListAction'store.dispatch(getCinemsListAction())...............................import axios from "axios"async function getCinemasListAction(){ var list = await axios({ ...... }).then(res=>{ return{ type:'change-list', payload://res.data.data.cinemas } }) return list }export default getCinemasListAction