git指令大全

一、流程

   1、当组件修改数据的时候需要调用store.dispatch传递一个action给store

    2、store接受到这个action会将action传递给reducers

    3、reducer接受到这个actions后做业务逻辑处理。并返回一个新的newState给store，store这个时候就拥有了state

    4、下一次数据再次发生改变的时候就不会使用defaultState 而是用store里面的state

    5、需要注意的是 reducers里面必须返回一个纯函数  另外reducers里面的state只允许读不允许修改

    6、组件如何监听数据的改变   store.subscribe();监听
安装：
二、步骤
yarn add redux --save-dev
1.创建store，对比flux，不需要合并空对象
import {createStore, combineReducers} from "redux";
import numReducers from "../store/combineReducers/numReducers"
import todoReducers from "../store/combineReducers/todoReducers"
const reducers = combineReducers({
    numReducers,
    todoReducers
})
const store = createStore(reducers);
export default store;
2.再在store中创建一个reducers.js
reducers必须有一个默认的state
reducers必须返回一个纯函数
reducers里面的state只允许读，不允许修改,如果修改的话页面是不会发生改变的
import reducers from "./reducers"
const defaultState = {
    inputVal:"",
    todoList:[]
}
export default (state = defaultState,action)=>{
    switch(action.type){
        case "INPUT_CHANGE":
        //深拷贝
            const changeState = JSON.parse(JSON.stringify(state))
            changeState.inputVal = action.value
            return changeState;
        case "ADD_ITEM":
            const addItemState = JSON.parse(JSON.stringify(state))
            addItemState.todoList.push(addItemState.inputVal)
            addItemState.inputVal = ""
            return addItemState;
        case "DEL_ITEM":
            const delItemState = JSON.parse(JSON.stringify(state))
            delItemState.todoList.splice(action.value,1)
            return delItemState
    }
    return state
}
3.页面
import React,{Component} from "react";
import store from "../store"
export default class Home extends Component{
    constructor(props){
        super(props)
        this.state = store.getState();
        //监听
        store.subscribe(this.handleUpdate.bind(this))
      
    }
    render(){
        let {inputVal,todoList} = this.state
        return (
            <div>
                <input type = "text" value = {inputVal} onChange = {this.handleChange.bind(this)}/>
                <button onClick = {this.handleAdd.bind(this)}>添加</button>
                <ul>
                    {
                            todoList.map((item,index)=>{
                            return <li key={index}>{item}
                                        <button onClick = {this.handleDel.bind(this,index)}>删除</button>
                                    </li>
                        })
                    }
                </ul>
            </div>
        )
    }
    handleChange(e){
        let val = e.target.value
        const action = {
            
            type:"INPUT_CHANGE",
            value:val           
        }
        store.dispatch(action)
    }
    handleAdd(){
        const action ={
            type:"ADD_ITEM"
        }
        store.dispatch(action)
    }
    handleDel(params){
        const action = {
            type:"DEL_ITEM",
            value:params
        }
        store.dispatch(action)
    }
    handleUpdate(){
        this.setState(store.getState())
    }
}
三、通过combineReducers合并多个reducers
1.创建combineReducers

2.在store>index.js合并
import {createStore, combineReducers} from "redux";
import numReducers from "../store/combineReducers/numReducers"
import todoReducers from "../store/combineReducers/todoReducers"
const reducers = combineReducers({
    numReducers,
    todoReducers
})
const store = createStore(reducers);
export default store;

3.state后加入reducers名
 render(){
        //state后加入reducers名
        let {inputVal,todoList} = this.state.todoReducers
        return (
            <div>
                <input type = "text" value = {inputVal} onChange = {this.handleChange.bind(this)}/>
                <button onClick = {this.handleAdd.bind(this)}>添加</button>