1分钟带你入门Redux、React-Redux
前言：还在迷茫在Redux门外的小伙伴们，今天de福利就能让你豁然开朗。至于Redux的目的我在这里就不在累赘了，直接上手基本用法。
Redux
我们先来看看Redux简单的工作流程吧？上图：
import {createStore} from redux
function reducer(state,action) {
... 修改state的地方
}
const store = createStore(reducer) // 第一步 创建数据仓库store,并定义好reducer
store.subscribe(() => { // 第二步 声明监听函数,当state发生变化的时候会触发
...
})
store.dispatch({type: xxx}) // 第三部 派发一个action触发reducer中对应的方法
简单的三部曲就是redux的全部,哈哈,如果不清楚,那就贴个完整的代码吧
import React from "react";
import { useState, useEffect } from "react";
import { createStore } from "redux";
function counter(count = 0, action) {
switch (action.type) {
case "INCREMENT":
return count + 1;
case "DECREMENT":
return count - 1;
default:
return count;
}
}
const store = createStore(counter);
export default () => {
const [count, setCount] = useState(0);
useEffect(() => {
store.subscribe(() => {
setCount(store.getState());
});
}, []);
return (
{count}
);
};
React-Redux
看到清楚上面的所展示Redux的"全部世界"之后，是不是感觉用起来还是不爽呀，那么React-Redux就是为了让你用来爽的，废话不多说，线上代码：
import React from "react";
import { useState, useEffect } from "react";
import { createStore } from "redux";
import {Provider,connect} from 'react-redux'
function counter(count = 0, action) {
... 这里同上略过
}
const store = createStore(counter);
export default () => {
return (
// 这里跟context的使用是不是很像呀? 一个统一的数据提供方
)
}
/** React-Reudx 提供了connect连接器(高阶函数)可以吧state和dispatch挂载到props上去 **/
// 向props挂载state
const mapStateToProps = state => {
return {count: state}
}
const Title = connect(mapStateToProps)((props) => {
return {props.count}
})
// 向props挂载dispatch
const mapDispatchToProps = dispatch => {
return {
increment: () => dispatch({ type: "INCREMENT" }),
decrement: () => dispatch({ type: "DECREMENT" })
}
}
const ButtonGroup = connect(null, mapDispatchToProps)((props) => {
return
})好了，我们来总结一下：
React-Redux 提供了两个最重要的API，一个是Provider，一个是connect
connect连接器，就是一个高阶函数；作用有二，一是能够获取Provider中store中的公共数据，二就是派发dispatch，并且都是从props上获取；这样就可以让你在用父子组件通信的成本，实现任意组件之间的通信
小结
Redux主要就是实现单向数据流的功能
首先，createStore，并把reducer函数传递给他
然后，将createStore创建的store进行监听订阅，store.subscribe
最后，通过store.dispatch指定需要的action，从而触发之前在store.subscribe中定义的函数
还有就是通过store.getState获取store中定义公共数据
React-Redux主要就是让Redux能够愉快在React中使用
Proivder一个高阶组件，简化了store.sbuscribe和store.getState的方式
最后，希望你能在React中愉快的使用Redux啦! 当然更多信息请参考官方文档。