React - Redux

1. Reduc 核心

1. Redux 介绍

JavaScript 状态容器，提供可预测化的状态管理

const state = {
	modelIOpen: "yes",
	btnClicked: "no",
	btnActiveClass: 'active',
	page: 5,
	size: 10
}

3. Redux 核心概念及工作流程

Store：存储状态的容器，JavaScript对象
View: 视图，HTML⻚⾯
Actions: 对象，描述对状态进⾏怎样的操作
Reducers：函数，操作状态并返回新的状态

4. Redux 核心API

// 创建 Store 状态容器
const store = Redux.createStore(reducer);
// 创建用于处理桩体的 reducer 函数
function reducer (state = initialState, action) {}
// 获取状态
store.getState();
// 订阅状态
store.subscribe(function () {});
// 出发 Action
store.dispatch({type: 'description...'});

计数器案例：

2. React + Redux

1. 在 React 中不使⽤ Redux 时遇到的问题

在React中组件通信的数据流是单向的, 顶层组件可以通过props属性向下层组件传递数据, ⽽下层
组件不能向上层组件传递数据, 要实现下层组件修改数据, 需要上层组件传递修改数据的⽅法到下层
组件. 当项⽬越来越⼤的时候, 组件之间传递数据变得越来越困难.

2. 在 React 项⽬中加⼊ Redux 的好处

使⽤Redux管理数据，由于Store独⽴于组件，使得数据管理独⽴于组件，解决了组件与组件之间传递数据困难的问题。

3. npm install redux react-redux

4. Redux ⼯作流程

1. 组件通过 dispatch ⽅法触发 Action
2. Store 接收 Action 并将 Action 分发给 Reducer
3. Reducer 根据 Action 类型对状态进⾏更改并将更改后的状态返回给 Store
4. 组件订阅了Store中的状态，Store中的状态更新会同步到组件
   

5. Redux 使⽤步骤

环境：

1. npm install create-react-app -g
2. create-react-app react-redux-guide
3. cd-react-redux-guide
4. npm install redux react-redux
5. npm start

1. 创建 Store 和 Reducer

1. 创建 Store 需要使⽤ createStore ⽅法, ⽅法执⾏后的返回值就是Store, ⽅法需要从 redux 中引⼊
2. createStore ⽅法的第⼀个参数需要传递reducer
3. reducer 是⼀个函数, 函数返回什么, store中就存储什么. 函数名称⾃定义.

import { createStore } from "redux";
const store = createStore(reducer);
function reducer(){
	reture { count: 1 };
}

2. 组件获取Store中的数据

1. 将store中的数据放在Provider组件中, Provider组件是存储共享数据的地⽅

import { Provider } from 'react-redux';
ReactDOM.render(<Provider store={store}><APP/><Provider>);

2. 组件使⽤connect⽅法获取数据并将数据通过props传递进组件
   
3. 组件使⽤connect⽅法获取数据并将数据通过props传递进组件

import { connect } from 'react-redux';
const mapStateToProps = state => ({
	count: state.count
})
const mapDispatchToProps = dispatch => ({
	increment () {
		dispatch({ type: 'increment' })
	},
	decrement () {
		dispatch({ type: 'decrement' })
	}
})
export default connect(mapStateToTProps,  mapDispatchToProps)(组件名称);

connect 方法的作用：

• connect 方法会订阅 store，当store中的状态发生改变时，重新渲染组件
• connect 方法可以获取store中的状态，将状态通过组件的props属性映射给组件
• connect 方法可以获取 dispatch 方法

4. bindActionsCreators 方法的使用

import { bindActionsCreators } from 'redux';
import * as couterActions from '设置actions的文件路径'
const mapDispatchToProps = bindActionsCreators(couterActions, dispatch)

3. 组件更改Store中的数据

1. 定义 action

{ type: '描述对数据要进行什么样的操作' }

action 是改变状态的唯一途径

2. 组件出发 action

this.props.dispatch({ type: '描述对数据进行什么样的操作' })

3. reducer 接受 action，针对 action 对数据进行处理并返回
   

4. 为 action 传递参数

1. 传递参数
   
2. 接受参数，传递reducer
   
3. reducer 根据接收到的数据进行处理
   

6. 优化

…

3. Redux 中间件

1. 中间件作用：允许扩展redux应⽤程序。

2. 加⼊了中间件 Redux ⼯作流程

3. 开发 Redux 中间件

4. 注册中间件

中间件在开发完成以后只有被注册才能在Redux的⼯作流程中⽣效

5. 中间件开发实例 thunk

thunk 中间件可以让我们在 Redux 的⼯作流程中加⼊异步代码

4. Redux 常用中间件

1. Redux-thunk

thunk 中间件可以在 Redux 的⼯作流程中加⼊异步代码

2. Redux-saga

1. redux-saga 可以将异步操作从 Action Creator ⽂件中抽离出来，放在⼀个单独的⽂件中.
2. 下载：npm install redux-saga
3. 创建 redux-saga 中间件
   
4. 注册 sagaMiddleware
   
5. 使⽤ saga 接收 action 执⾏异步操作
   
6. 启动saga
   
7. 合并sagas
   

3. redux-actions

1. redux流程中⼤量的样板代码读写很痛苦, 使⽤redux-actions可以简化Action和Reducer的处理
2. 下载：npm install redux-actions
3. 创建 Action
   
4. 创建 Reducer