Redux總結

Drinkey 發布于2019-08-26 13:50 / 1404人閱讀

做為一個前端小白，在自學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 (
      
        
          
          
        
         (
            
             {item}
            
          )}
        />
      
    );
  }
}

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";

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

GPU云服務器云服務器 Redux redux源碼 redux-saga react-redux

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109628.html

對redux和react-redux的理解和總結（一）

摘要：使得在變化和異步中可預測。它是數據的唯一來源。指定了應用狀態的變化如何響應并發送到的，只是描述了有事情發生了這一事實，并沒有描述應用如何更新。更新的函數稱為，它是一個純函數，接受舊的和，返回新的。是和之間的橋梁，是把它們聯系到一起的對象。為什么使用redux 隨著前端單頁面開發越來越復雜，javascript需要管理越來越多的狀態state。如果一個model的變化引起另一個mode...

skinner 2019-08-22 18:19 評論0 收藏0
單頁應用開發總結

摘要：本文想通過自己這一年的單頁應用開發經驗，來對的開發做一個總結。但是要知道，現如今頁面都比較復雜，一般的單頁應用都需要一個可靠的數據流去處理，否則在日后維護方面會難度巨大。本文想通過自己這一年的單頁應用開發經驗，來對SPA的開發做一個總結。頁面開發模式通常我們在開發頁面時，都會拿到一份設計圖，假設我們拿到一份這樣的設計圖 showImg(https://segmentfault.c...

zzbo 2019-08-20 17:01 評論0 收藏0
一篇文章總結redux、react-redux、redux-saga

摘要：編輯器頂層組件不就了嗎這就是。官方提供的綁定庫。具有高效且靈活的特性。在的中，可以使用或者等來監聽某個，當某個觸發后，可以使用發起異步操作，操作完成后使用函數觸發，同步更新，從而完成整個的更新。不就ok了嗎？這就是 react-redux。Redux 官方提供的 React 綁定庫。具有高效且靈活的特性。 React Redux 將組件區分為容器組件和 UI 組件前者會處理邏輯...

April 2019-05-21 19:08 評論0 收藏0
Redux 的簡單總結

摘要：目前，官方沒有提供監控部分改變的方法。這個函數執行后，在中被提及的成員會被替換。這個函數與相比，唯一的好處是假如組件定義不在入口文件如中，這種方法可以免于入口文件中的全局。 Redux https://redux.js.org/https://cn.redux.js.org/ store.getState() https://redux.js.org/api-refe... 這個函數返...

Elle 2019-08-22 17:33 評論0 收藏0
React組件設計實踐總結05 - 狀態管理

摘要：要求通過要求數據變更函數使用裝飾或放在函數中，目的就是讓狀態的變更根據可預測性單向數據流。同一份數據需要響應到多個視圖，且被多個視圖進行變更需要維護全局狀態，并在他們變動時響應到視圖數據流變得復雜，組件本身已經無法駕馭。今天是 520，這是本系列最后一篇文章，主要涵蓋 React 狀態管理的相關方案。前幾篇文章在掘金首發基本石沉大海, 沒什么閱讀量. 可能是文章篇幅太長了？掘金值太低了？ ...

ideaa 2019-05-23 11:48 評論0 收藏0