Redux總結

作爲一個前端小白，在自學Redux過程當中我的認爲首先須要明白Action、Store、reducer(state,action)、Component中間的關係，簡單的能夠理解爲圖書館借書的過程，用戶提出借什麼書的請求給管理員，管理員去reducer裏查找有沒有你須要的書，reducer會返回一個state數據告訴管理員有沒有這本書，用戶經過store.getState()方法獲得管理員從reducer獲得的數據。

簡介：以TodoList爲例由淺入深的學習redux。
1、建立store、reducer，引入到文件後並調用store裏數據

一、建立store:使用redux的createStore（）方法建立，導出store

// 建立store
import {createStore} from 'redux'
// 引入reducer
import reducer from 路徑

const store=createStore(reducer);

export default store;

三、建立reducer數據：直接返回函數，默認返回參數State

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

四、將store文件引入到目錄下，使用stroe.getState()方法獲取reducer裏的數據

五、聲明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())
}

六、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';

2、詳細代碼以下：

一、建立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;

二、建立store

// 利用redux裏的createStore（）方法建立store
import {createStore} from "redux"
// reducers裏存放全部數據
import reducers from './reducers'
const store=createStore(reducers);

// 導出store
export default store;

三、建立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;
}

四、將全部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';

-----------------持續更新中-------------------