【React】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实现计数器

1. 目录结构
   

2. 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;

3. action.js

function add(){
   
    return {
   
        type: 'ADD',
    }
}

function minus(){
   
    return {
   
        type: 'MINUS'
    }
}

const action = {
   add,minus};

export default action;

4. 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);

5. App.js

import Counter1 from './components/Counter1';


function App() {
   
  return (
    <div className="App">