Redux总结

做为一个前端小白，在自学Redux过程中个人认为首先需要明白Action、Store、reducer(state,action)、Component中间的关系，简单的可以理解为图书馆借书的过程，用户提出借什么书的请求给管理员，管理员去reducer里查找有没有你需要的书，reducer会返回一个state数据告诉管理员有没有这本书，用户通过store.getState()方法得到管理员从reducer得到的数据。

简介：以TodoList为例由浅入深的学习redux。
一、创建store、reducer，引入到文件后并调用store里数据

1、创建store:使用redux的createStore（）方法创建，导出store

// 创建store
import {createStore} from 'redux'
// 引入reducer
import reducer from 路径

const store=createStore(reducer);

export default store;

3、创建reducer数据：直接返回函数，默认返回参数State

//创建reducer
const defaultState={}
export default (state=defaultState,action) => {
    return state;
}

4、将store文件引入到目录下，使用stroe.getState()方法获取reducer里的数据

5、声明action并使用store.dispatch(action)方法将action传递给store，reducer里接收store自行传过来的action与state数据并返回一个新的数据，

// 组件订阅store
store.subscribe(被订阅者)，实现联动效果

hadChange(e){
  // 声明action
  const action={
    type："change_input_value";
    value:e.taget.value
  }
  // 将action传递给store
  store.dispatch(action)
}

// state只能接收数据不能操作数据，需要将数据进行深拷贝
if(action.type === "change_input_value"){
  const newState=JSON.parse(JSON.stringify(state));
  newState.value=action.value;
  return newState;
}

//store订阅一个更新函数，待dispatch之后，执行这个更新函数，获取新的值
store.subScribe(this.hadChangeValue.bind(this))
hadChangeValue(){
  this.setState(store.getState())
}

6、actionTyps.js是将所有action以变量的形式存到js文件里，方便后续因拼写出错导致查找报错原因，代码如下：

export const CHANGE_INPUT_VALUE ='change_input_value';
export const ADD_TODO_ITEM ='add_todo_item';
export const DELE_TODO_ITEM ='dele_todo_item';

二、详细代码如下：

1、创建Antds模块

import React, { Component,Fragment } from 'react';
//引入antd库
import { Input,Button, List} from 'antd';
import store from '../store/index.js'
import {CHANGE_INPUT_VALUE ,ADD_TODO_ITEM,DELE_TODO_ITEM} from '../store/actionTyps'

class Antds extends Component {
  constructor(props){
    super(props);
    this.state=store.getState();
    this.hadChange=this.hadChange.bind(this);
    this.changeValue=this.changeValue.bind(this);
    this.hadClick=this.hadClick.bind(this);
    //订阅store
    store.subscribe(this.changeValue)
  }

  hadChange(e){
    //声明一个action，它是一个函数
    const action={
      type:CHANGE_INPUT_VALUE,
      value:e.target.value
    }
    // 将action传给store，使用store提共的dispatch(action)方法
    store.dispatch(action)
  }
  // 点击按钮声明action
  hadClick(){
    const action ={
      type:ADD_TODO_ITEM,
    }
    // 将action传递给store
    store.dispatch(action)
  }
  changeValue(){
    // 感知到stoe发生变化后调用store.getState()
    this.setState(store.getState())
  }
  hadClickItem(index){
    const action ={
      type:DELE_TODO_ITEM,
      index
    }
    // 将action传递给store
    store.dispatch(action)
  }
  render() {
    return (
      <Fragment>
        <div style={{margin:"10px"}}>
          <Input  
            value={this.state.inputValue}  
            placeholder="输入内容" 
            style={{width:'300px',margin:"2px"}}
            onChange={this.hadChange}
          />
          <Button type="primary" onClick={this.hadClick}>提交</Button>
        </div>
        <List
          style={{width:'300px',margin:"10px"}}
          bordered
          dataSource={this.state.lis}
          renderItem={(item,index) => (
            <List.Item 
              onClick={this.hadClickItem.bind(this,index)}
            >
             {item}
            </List.Item>
          )}
        />
      </Fragment>
    );
  }
}

export default Antds;

2、创建store

// 利用redux里的createStore（）方法创建store
import {createStore} from "redux"
// reducers里存放所有数据
import reducers from './reducers'
const store=createStore(reducers);

// 导出store
export default store;

3、创建reducer

import {CHANGE_INPUT_VALUE ,ADD_TODO_ITEM,DELE_TODO_ITEM} from './actionTyps'
const defaultState={
    inputValue:'',
      lis:[],
}

export default (state=defaultState,action)=>{
    if(action.type===CHANGE_INPUT_VALUE ){
        // 深拷贝
        const newState=JSON.parse(JSON.stringify(state));
        newState.inputValue=action.value;
        return newState;
    }
    if(action.type === ADD_TODO_ITEM){
        // 深拷贝
        const newState=JSON.parse(JSON.stringify(state));
        newState.lis.push(newState.inputValue);
        newState.inputValue='';
        return newState;
    }
    if(action.type === DELE_TODO_ITEM){
        // 深拷贝
        const newState=JSON.parse(JSON.stringify(state));
        newState.lis.splice(action.index)
        return newState;
    }
    return state;
}

4、将所有action以变量形式存到文件中

export const CHANGE_INPUT_VALUE ='change_input_value';
export const ADD_TODO_ITEM ='add_todo_item';
export const DELE_TODO_ITEM ='dele_todo_item';

-----------------持续更新中-------------------