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 ⼯作流程
- 组件通过 dispatch ⽅法触发 Action
- Store 接收 Action 并将 Action 分发给 Reducer
- Reducer 根据 Action 类型对状态进⾏更改并将更改后的状态返回给 Store
- 组件订阅了Store中的状态,Store中的状态更新会同步到组件
5. Redux 使⽤步骤
环境:
- npm install create-react-app -g
- create-react-app react-redux-guide
- cd-react-redux-guide
- npm install redux react-redux
- npm start
1. 创建 Store 和 Reducer
- 创建 Store 需要使⽤ createStore ⽅法, ⽅法执⾏后的返回值就是Store, ⽅法需要从 redux 中引⼊
- createStore ⽅法的第⼀个参数需要传递reducer
- reducer 是⼀个函数, 函数返回什么, store中就存储什么. 函数名称⾃定义.
import { createStore } from "redux";
const store = createStore(reducer);
function reducer(){
reture { count: 1 };
}
2. 组件获取Store中的数据
- 将store中的数据放在Provider组件中, Provider组件是存储共享数据的地⽅
import { Provider } from 'react-redux';
ReactDOM.render(<Provider store={store}><APP/><Provider>);
- 组件使⽤connect⽅法获取数据并将数据通过props传递进组件
- 组件使⽤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 方法
- bindActionsCreators 方法的使用
import { bindActionsCreators } from 'redux';
import * as couterActions from '设置actions的文件路径'
const mapDispatchToProps = bindActionsCreators(couterActions, dispatch)
3. 组件更改Store中的数据
- 定义 action
{ type: '描述对数据要进行什么样的操作' }
action 是改变状态的唯一途径
- 组件出发 action
this.props.dispatch({ type: '描述对数据进行什么样的操作' })
- reducer 接受 action,针对 action 对数据进行处理并返回
4. 为 action 传递参数
- 传递参数
- 接受参数,传递reducer
- 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
- redux-saga 可以将异步操作从 Action Creator ⽂件中抽离出来,放在⼀个单独的⽂件中.
- 下载:npm install redux-saga
- 创建 redux-saga 中间件
- 注册 sagaMiddleware
- 使⽤ saga 接收 action 执⾏异步操作
- 启动saga
- 合并sagas
3. redux-actions
- redux流程中⼤量的样板代码读写很痛苦, 使⽤redux-actions可以简化Action和Reducer的处理
- 下载:npm install redux-actions
- 创建 Action
- 创建 Reducer