react-redux基础

<provider stroe>

Provier 使组件中的connect()都能获得Redux store. 正常情况下, 你的根组件应该嵌套在 <Rrovider> 中才能使用connect() 方法

属性

• store : redux : 应用程序中 唯一的Redux Store 对象
• children( ReactElement) 组件层级的根组件

Provider简单用法

ReactDOM.render(
  <Provider store={store}>
    <MyRootComponent />
  </Provider>,
  rootEl
)

connect([mapStateTopProps], [mapDispathTopProps], [mergProps], [options] )

参数

mapStateToProps (callback), 如果定义改参数, 组件监听Redux store 的变化. 任何时候 这样Redux store 发生改变, mapStateToProops函数 就会被调用, 该回调函数 必须返回一个纯对象,这个对象会与组件的 props 合并.

返回值

根据配置信息, 返回一个注入了state和action createo 的React 组件, 它允许我们将store的数据, 作为 props绑定在组件上

const mapStateToProps = (state) => {
    return state
}

mapDispatchoProps可以将action 作为props 绑定到 组件中,.

const mapDispatchoProps = (dispatch) => {
    return {
        add(){
            const action = dispatch(increment)
            dispatchaction
        }
    }
}

mergrProps

如果指定了这个参数, mapStateToProps() 与 mapDispatchToProps() 的执行结果和组件自身的 props 将传入到这个回调函数中。该回调函数返回的对象将作为 props 传递到被包装的组件中。

下面是一个简单的例子

index.js

import React, { useState } from 'react';
import { render } from 'react-dom';
import App from "../src/App"
import './index.css';
import  { Provider }   from "react-redux"
import store from "./Redux1/store"
render(
    <Provider store={store}>
          <App />
    </Provider>,
    document.getElementById('root')
 );

App.js

import React, { Component } from 'react';
import './App.css'
import storeOne from "./Redux1/store"// 引入创建好的store
import Test from "./components/test"
class App extends Component {
  render() {
    let { count } = storeOne.getState()// 获取store中的数据
    return (
      <div className="App">
        {count}
        <Test  ></Test>
      </div>
    );
  }
}
export default  App

test.js

import React, { Component } from 'react'
import {connect} from "react-redux"
import { handleIncrement, handleDecrement } from '../Redux1/Action'
class Test extends Component {
    handleAdd = () =>{
        const {add} = this.props;// 将props中的add 方法解构出来
        add()
    }
    render() {
      const {count} = this.props;
        return (
            <div>
                {count}
                <button onClick={this.handleAdd} >
                    count++
                </button>
            </div>
        )
    }
}
const mpaStateToProps = (state,props = {}) => {
    return state
}
const mapDispatchToProps = (dispatch) => {
    return {
        add(){
            const action = handleIncrement()// 执行导入的函数 返回action对象
            dispatch(action)// 触发dispatch
        },
        sub(){
            const action = handleDecrement();
            dispatch(action)
        }
    }
}
// 将store中的state, 和dispatch 传递到 Test组件props中
export default connect(mpaStateToProps,mapDispatchToProps)(Test)

action.js

export function handleIncrement() {
    return {
        type: 'increment',
    }
}
export function handleDecrement() {
    return {
        type: 'decrement',
    }
}

reducer.js

const initState = { //初始化数据
    count:0,
}
export default function reducer(state = initState, action){//给state初始化一个默认值
    switch (action.type) {
        case 'increment':// 对count++
            //// 利用Object.assig返回新的对象, 便于redux能够监听到数据的变化,更新视图
            return  Object.assign({},state,{
                count: state.count+1
            })
            break;
        case 'decrement':
            return  Object.assign({},state,{
                count:state.count -1 
            })
        default:// 返回默认的state
            return state;
    }
}

store.js

// 这里是组件 store 的文件
import {createStore} from "redux";
import reducer from "./reducer";
const storeOne = createStore(reducer)// 创建一个仓库
export default storeOne// 将这个仓库导出

下面是demo目录的结构

image-20200819223635888.png