React-Redux的教程使用说明

React-Redux这是一个React生态中常用组件，它可以简化Redux流程

1.安装react-reudx所需要的依赖

npm install --save react-redux

2.Redux的安装和使用

npm install --save redux

首先创建一个store文件夹，在store文件夹下创建一个index.js文件

import {createStore} from 'redux'
import reducer from './reducer'

const store = createStore(reducer)

export default store

然后在该文件夹下再创建一个reducer.js文件

const defalutState = {
    inputValue : '',
    list :[]
}

export default (state = defalutState,action) =>{
    return state
}

在store平级处创建一个ProviderTest.jsx文件，这是一个UI组件,stateToProps 相当于把state中数据传到props中，让props可以接受到这些数据，dispatchToProps 也是类似的功能

import React from 'react'

export const ProviderTest = (props) => {

    let { list ,inputValue , changeValue ,submit} = props
    
    return (
        <div>

            <input value={inputValue} onChange={(e)=>changeValue(e)}></input>
            <button onClick={submit}></button>
            <ul>
                {
                    list.map((item, index) => {
                        return <li key={index}>{item}</li>
                    })
                }
            </ul>
        </div>
    )
}

export const stateToProps = (state) => {
    return {
        inputValue : state.inputValue,
        list : state.list
    }
}

export  const dispatchToProps = (dispatch) => {
    return {
        changeValue(e) {
            let action = {
                type : "change_input",
                value : e.target.value
            }      
            dispatch(action)
        },
        submit(e) {
            let action = {
                type : "add_item",
            }
            dispatch(action)
        }
    }
}

也可以用bindActionCreator ，其作用其实就是用来将一个对象的值是action creators转成一个同样key的对象，但是转化的这个对象的值，是将action creator包裹在dispatch里的函数。

import React from 'react'
import { changeCountAction , getTodoList} from '../store/actionCreators';
import { bindActionCreators } from 'redux'


export const ReduxTestUi = (props) =>{
 
    let { count , actions} = props
    

    return (
        <div>
            <p>{count}</p>
            <button onClick={() =>actions.changeCountAction(1)}>+</button>
            <button onClick={actions.getTodoList}></button>
        </div>
    )
}

export const stateToProps = (state) => {
   
    return {
        count : state.count,
        input : state.inputValue
    }
}
 
export const dispatchToProps = (dispatch) => {

    return {
    
        actions:bindActionCreators({ changeCountAction, getTodoList},dispatch)
        // changeCount(){
        //     let action = changeCountAction(1)
        //     dispatch(action)
        // },
        // getList(){
        //     let action = getTodoList()
        //     dispatch(action)
        // }
    }
}

创建VisibleProviderTest.js文件，这是一个容器组件

import { connect } from "react-redux"
import  {ProviderTest,stateToProps,dispatchToProps}from "./ProviderTest"

const VisibleProviderTest = connect(stateToProps,dispatchToProps)(ProviderTest)

export default VisibleProviderTest

上面代码中，connect方法接受两个参数：stateToProps和dispatchToProps。它们定义了 UI 组件的业务逻辑。前者负责输入逻辑，即将state映射到 UI 组件的参数（props），后者负责输出逻辑，即将用户对 UI 组件的操作映射成 Action。

下面代码定义了两个action在store/reducer中进行对应的数据处理，修改刚才创建的reducer.js文件如下。

const defaultState = {
    inputValue : '',
    list : []
}
export default (state = defaultState,action) => {

    switch(action.type){
        case 'change_input' : {
            let newState = JSON.parse(JSON.stringify(state))
            newState.inputValue = action.value
            return newState
        }
        case 'add_item' : {
            let newState = JSON.parse(JSON.stringify(state))
            newState.list.push(newState.inputValue)
            newState.inputValue = ''
            return newState
        }
        default : return state
    }

}

Provider是一个提供器，只要使用了这个组件，组件里边的其它所有组件都可以使用store了，这也是React-redux的核心组件了。

将App.js改为下面这样

import { Provider } from 'react-redux'
import React from 'react';
import ReactDOM from 'react-dom';
import VisibleProviderTest from './VisibleProviderTest'
import store from './store'

function App() {
  return (
    <Provider store={store}>
      <VisibleProviderTest/>
    </Provider>
  );
  
}

export default App;