Redux 介绍
Redux 是 JavaScript 状态容器,提供可预测化的状态管理。Redux 除了和 React 一起用外,还支持其它界面库。它体小精悍(只有2kB,包括依赖)。
方法
- action //通过action把数据传递给reducer
- reducer //纯函数式,负责把数据发送给渲染
- dispatch //触发器
- store //数据源
Redux 例子
https://github.com/xuya227939/blog/tree/master/examples/react-redux/my-app
Redux 安装
$ sudo npm install -g create-react-app
$ create-react-app my-app
$ cd my-app
$ npm install --save redux
使用
1.修改App.js,引用官方代码。
import React from 'react'; import { createStore } from 'redux'; function counter(state = 0, action) { switch (action.type) { case 'INCREMENT': return state + 1 case 'DECREMENT': return state - 1 default: return state } } let store = createStore(counter) store.subscribe(() => console.log(store.getState()) ) store.dispatch({ type: 'INCREMENT' }) store.dispatch({ type: 'INCREMENT' }) store.dispatch({ type: 'DECREMENT' }) const BasicExample = () => ( <div>123</div> ) export default BasicExample
2.npm start 调出开发者工具,看console.log输出。
佐贺介绍
- 官方介绍:是一个旨在使应用程序副作用(即数据获取等异步事件和访问浏览器缓存等不纯的内容)更容易管理,更高效执行,易于测试并更好地处理故障的库。
- 个人理解:类似于thunk,就是解决异步callBack过多的问题。
方法
- call //发送异步请求
- takeEvery //每次发送saga,都会更新数据
- takeLatest //会取消上次的saga,更新最后一个saga
- put //类似调度,发送数据到reducer
佐贺县的例子
这里以计数器为例子
https://github.com/xuya227939/blog/tree/master/examples/saga/my-app
Saga 安装
$ sudo npm install -g create-react-app
$ create-react-app my-app
$ cd my-app
$ npm install --save redux
$ npm install --save redux-saga
使用
export function* addFun() { yield put({ type: "ADD" }); } function* homeSaga() { yield takeEvery("ADD_SAGA", addFun); }
function*
Generato函数
监听action
逻辑处理homeSaga函数addFun函数
yield put({ type: "ADD" });
类似action的dispatch,发送数据到reducer
问题处理
1.如果报类似这样的错,react-scripts command not found 那么就 $ rm -rf node_modules 模块,重新安装下 $ npm i,再重新npm start
欢迎在此issue下进行交流、学习
结语
- Redux:只能通过dispatch去改变,让这一切变得可以预测。这是我认为redux做得最好的地方,类似时间管理器的概念。任何时刻发生的事,都可以预测到结果。方便追踪BUG的产生。而不像原先H5一样,任何人都可以任意修改数据。从而是数据的发生变得很混乱。
- saga:核心功能,解决了异步事件的回调地狱和浏览器刷新这些副作用。