React-Redux
1. React-Redux概述
- React-Redux 是 Redux 的官方 React 绑定库。
- React-Redux 能够使React组件从Redux store中读取数据,并且向 store 分发 actions 以更新数据。
- React-Redux 并不是 Redux 内置,需要单独安装。
- React-Redux 一般会和 Redux 结合一起使用。
安装redux、react-redux:
npm install redux;
npm install react-redux;
2. Provider
- 是react-redux提供的一个React组件。
- 作用是把state传给它的所有子组件。
- 也就说当你使用Provider传入数据后,下面的所有子组件都可以共享数据,很方便。
使用方法: 用Provider组件包裹在最外层的组件
<Provider store={
store }>
<App />
</Provider>
注意:一定是在Provider中传store
3. connect
是一个高阶组件(高阶组件:传入一个组件,它会返回新的加工后的组件)。
connect有四个参数([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])后面两个参数可以不写,不写的话它是有默认值的。
主要关注前两个参数: mapStateToProps和 mapDispatchToProps。
mapStateToProps
:如果定义该参数,组件会监听rRedux store的变化。任何时候,
只要 Redux store 发生改变,mapStateToProps 函数就会被调用。mapDispatchToProps
:如果传递的是一个对象,那么每个定义在该对象的函数都将被当作 Redux action creator,对象所定义的方法名将作为属性名;
每个方法将返回一个新的函数,函数中dispatch方法会将 actioncreator 的返回值作为参数执行。这些属性会被合并到组件的 props 中。
使用方法:把指定的state和指定的action与React组件连接起来,后面括号里面写UI组件名
connect(mapStateToProps,mapDispatchToProps)(TbItem)
4. 示例
4.1 利用react-redux实现计数器
-
目录结构
-
store.js
import {
createStore} from 'redux';
export const ADD = 'ADD';
export const MINUS = 'MINUS';
function reducer(state = {
count:0},action){
console.log('Action:',action);
switch (action.type) {
case ADD:
return {
count: state.count + 1}
case MINUS:
return {
count: state.count - 1}
default:
return state
}
}
let store = createStore(reducer);
export default store;
- action.js
function add(){
return {
type: 'ADD',
}
}
function minus(){
return {
type: 'MINUS'
}
}
const action = {
add,minus};
export default action;
- Counter1.js
import {
connect} from 'react-redux';
import action from '../actions/action';
function Counter1(props){
return(
<>
<p>{
props.count}</p>
<button onClick={
props.add}>count++</button>
<br/>
<button onClick={
props.minus}>count--</button>
</>
)
}
const mapStateToProps = state => state;
const mapDispatchToProps = {
...action
}
export default connect(mapStateToProps, mapDispatchToProps)(Counter1);
- App.js
import Counter1 from './components/Counter1';
function App() {
return (
<div className="App"