redux

在react中有props和state，但如果要在层级之间传递数据是无法实现两个组件之间的相互交流的。所以产生了redux这个机制，使所有state集中到组件顶部，能够将所有state各取所需的分发给所有组件--------redux.

使用步骤：

创建reducer

当action发出命令后将state放在reducer加工函数之后，并返回新的state

创建action

action可以理解为指令，用户是接触不到state的，只能由view端发出的动作。本质是一个对象，必须要有一个type的key

创建store

store是一个总工厂，提供dispatch，getState方法

react-redux

处理对象

1. 创建reducer（但为了方便action的管理，我们先定义action的类型CONSTANT）

01-constant.js

一些action的type标识

export const increment = "increment"
export const decrement = "decrement"

02-reducer.js

直接修改state的地方

//配合store执行  ; action{type:"increatment",data}
import * as CONSTANT from "../action/constant"
const defaultState = 0
const reducer = (state=defaultState, action) => {
    switch (action.type) {
        case CONSTANT.increment:  
            return state+1
        case CONSTANT.decrement:  
            return state-1
        default:
           return state
    }
}
export default reducer

2. 创建action.js

view的操作type指令在这里!

import * as CONSTANT from './constant';
export const incrementAction =()=>{
    return {type:CONSTANT.increment}
}
export const decrementAction =()=>{
    return {type:CONSTANT.decrement}
}

action中全部为view中发出的指令。

3. 创建store

import { createStore} from 'redux'
import reducer from "./reducer"
//整个应用只有一个store，reducer有很多个去处理事务
const store = createStore(reducer);
export default store

4. 创建UI组件

此时还没有接收到数据

//01UI组件
function Counter(props){
    const {value,increment,decrement} = props
    return (
        <p>
        Clicked:{value} times
        <button onClick={increment}>+</button>
        <button onClick={decrement}>-</button>
     </p>
    )
}
export default Counter

5. 创建容器组件

在容器组件中使用connect对UI组件进行增强

const Container = connect(数据增强，行为增强)(ui组件)

根据UI中所需要的数据和方法进行增强，UI需要value increment，decrement

全部可以传递到props中，看方法名也可以知道
实现在UI中通过props解包获得方法数据
const mapStateToProps = state => ({
  value: state  //拿到数据
})
const mapDispatchToProps =dispatch=> {
  increment: () => dispatch(Action.incrementAction()), //派发指令
  decrement: () => dispatch(Action.decrementAction())
}

整合并导出：

const Container = connect(mapStateToProps, mapDispatchToProps)(Counter)
export default Container

6. 在App根组件整合所有

import store  from "./store"
import React from "react"
import Container from "./Container"
import { Provider } from "react-redux"
// 通过provider提供store提供给子组件
class App extends React.Component{
    render(){
      return(
          <Provider store={store}> //将store中所有数据方法都传递下去
          <Container/> //放容器组件
          </Provider>
      )
    }
 }
 export default App

----大功告成----

处理form表单 方向相反

1. 定义UI组件

接收容器组件中通过props传来的数据----增强

function Student(props){
    const {name,age,handleNameInput,handleAgeInput} =props
    return(
        <div>
        <h1>name:{name},age:{age}</h1>
        name:<input type="text" onChange={handleNameInput} />
        age:<input type="text" onChange={handleAgeInput} />
        </div>
    )
}

2. 定义容器组件(connect增强)

写完action行为回到这里
const mapState=(state)=>{
    return{
        name:state.name,
        age:state.age
    }
}
const mapDispatch={
    没写之前，留位置：
    handleNameInput:(e)=>{type:xxx,payload:e.target.value}
    handleAgeInput:()=>{}
    写好步骤6后增强为：
    handleNameInput:(e)=>Actions.nameAction(e.target.value),
    handleAgeInput:(e)=>Actions.ageAction(e.target.value)
}
const StudentContainer = connect(mapState,mapDispatch)(Student)
export default StudentContainer

3. 在App根组件中整合

class App extends React.Component{
    render(){
      return(
          <Provider store={store}>
          <StudentContainer/>
          </Provider>
      )
    }
 }
 export default App

4. 创建store

const store = createStore(reducerStudent);//其实先有reducer
export default store

5. 创建reducer.js

01-CONSTANT.js

export const NAMEINPUT = "NAMEINPUT"
export const AGEINPUT = "AGEINPUT"

02-reducer.js

根据view配发的action去写好行为代码

import * as CONSTANT from "../constant"
const defaultState = {
    name: "unknow",
    age: 18
}
const reducer = (state = defaultState, action) => {
    console.log(action);
    switch (action.type) {
        case CONSTANT.NAMEINPUT:
            let name = action.payload
            return {
                ...state, name: name
            }
            case CONSTANT.AGEINPUT:
                let age = action.payload
                return {
                    ...state, age: age
                }
                default:
                    return state
    }
}
export default reducer

6. 完善行为：创建action.js

02-创建用户接触的action.js

import * as CONSTANT from '../constant';
export const nameAction = (payload)=>{
    return {
        type:  CONSTANT.NAMEINPUT,payload
    }
}
export const ageAction = (payload)=>{
    return {
        type:  CONSTANT.AGEINPUT,payload
    }
}

写好action可以去容器组件中写好行为增强了，返回至步骤3.

如果reducer很多怎么办呢？

import { createStore,combineReducers} from 'redux'

引入combineReducers

const store = createStore(combineReducers({
    counter:reducerCounter,
    student:reducerStudent
}));

那比如在获取student中reducer的state时可以写成;

const mapState =state=>({
    name:state.student.name
})

state获取到的是counter和student两个，进一步选择才会进入reducer的state数据里。

15-react-redux-demo