Redux

Redux 是一个状态管理工具，由 flux 演变而来，但它相对来说更容易上手。通过创建一个仓库，存储操作 view 层的状态，实现状态的共享，操作状态的变化实现页面渲染。使用 Redux 可以使组件间的数据交互更加方便，对于项目的开发和后期维护也会更加方便。

Redux 的应用范围

由于Redux 的功能在于对组件的状态进行集中的管理，当组件间的状态传递较为简单，页面的渲染与状态间的交互较少较简单时，不必使用 Redux 。因此，可以在以下几种情况下使用 Redux：
1. 某个组件的状态需要共享
2. 某个状态需要在任何地方都可以拿到
3. 一个组件需要改变全局状态
4. 一个组件需要改变另一个组件的状态

Redux 的三大原则

单一数据源（store是唯一的）
state 是只读的（不能对state进行修改）
使用纯函数（reducer）执行修改

Redux 的使用

下面开始使用 Redux

安装 redux

	npm i redux
	yarn add redux

在 src 文件夹中创建一个 store 文件夹，添加 index.js 和 reducer.js 文件
在 index.js 文件中引入 createStore 方法，创建一个 store 并导出

	import {createStore} from 'redux'
	import reducer from './reducer'
	const store = createStore(reducer)
	export default store

在 reducer.js 文件中创建纯函数 reducer 并导出，在仓库中调用

	const initState = {
		// 设置 state 的初始值
	}
	export default (state=initState,{type,payload})=>{
	    return state
	}

组件中使用 store 时，直接引入 store对象

	import store from 'store的路径'

store 中的常用方法主要有：
dispatch(抛发动作)

	store.dispatch({type:'动作名称',payload})
	//抛发的动作名称必须大写
	//payload 是执行抛发动作时组件向仓库传递的参数

dispatch 会将参数抛发给 reducer 纯函数的第二个参数，根据 type 的值进行数据处理

subscribe(订阅监听)

	store.subscribe(()=>{
		//订阅方法的参数是一个回调函数
		//通常在这里调用组件的setState方法，对组件的状态进行修改
		//从而触发render函数执行
	})

getState(获取状态)

	store.getState()

下面使用一张图片描述 Redux 的工作流程
在这里插入图片描述
在组件中导入 store ，使用 getState 方法可以直接获取仓库中的数据；当需要对仓库数据进行处理时，在组件上通过 ActionCreators 传递 action 给仓库的 dispatch 方法，通过 dispatch 方法抛发动作(action)，在 reducer 这个纯函数中根据 action.type 选择处理数据的动作；执行不同的数据处理，返回一个newState，组件中通过仓库的 subscribe 方法监听仓库数据的变化，调用 this.setState 方法，修改 state 触发页面渲染。

来源：CSDN

作者：koala_c

链接：https://blog.csdn.net/koala_c/article/details/104487340

标签

redux

小白关于Redux 的一点学习总结

Redux

Redux 的应用范围

Redux 的三大原则

Redux 的使用