React 狀態管理之Redux

2021-08-08 10:19:54 字數 1586 閱讀 7977

flux ->

|- vuex // vue

|- react-redux

// react

state: 狀態收集、更新內部state狀態,更新component

1.建立預設狀態(一般const or let乙個物件)

const defaultstate=;
2.建立 reducer 純函式(函式必須有返回值)

let reducer=(state=defaultstate,action)=>=action;

switch (type),state,);

break;

default:

return state;

}};

3.例項化 store 物件

let store = createstore(reducer,defaultstate);
1.訂閱 store (一般在 componentdidmount 裡來接受 store 資料)

this.props.store.subscribe(()=>);

})

2.action(發布/更新)資料(一般為事件觸發函式)

this.props.store.dispatch();
有乙個小巧而精緻的小栗子(補全上面**):
import react from 'react';

import reactdom from 'react-dom';

import from 'redux'; //解構乙個createstore 建立狀態物件

//預設狀態 state

const defaultstate=;

//建立reducer 純函式 ,必須要有返回值(state)

let reducer=(state=defaultstate,action)=>=action;

switch (type),state,);

break;

default:

return state;

}};//建立store例項物件

let store = createstore(reducer,defaultstate);

//建立todolist元件

class todolist extends react.component;

this.add=this.add.bind(this);

} componentdidmount());

//訂閱store的狀態

this.props.store.subscribe(()=>);

})} add());

} render()/>

>li>})}

ul>

div>

);}}

reactdom.render(

store=>

todolist>,

);

Redux狀態管理

1 三大原則 單一資料來源 state是唯讀的 redux中state的更改,其實是建立了乙個全新的state 使用純函式來執行修改 1 將整個應用的state儲存在唯一的store物件中 2 state只能通過觸發action來修改,其中action就是乙個描述性的普通物件 3 使用reducer...

React使用Redux管理資料

redux 提供createstore這個函式,用來生成 store。createstore函式接受另乙個函式作為引數,返回新生成的 store 物件。中介軟體,用於非同步action import thunk from redux thunk 引入reducer import reducers f...

React狀態管理

狀態管理 為什麼react要使用狀態管理 那麼狀態管理做了什麼呢?三者都是架構思維,react只是它的乙個組成部分 flux flux它是一種架構思維,和mvc是同乙個級別的 要求 說明 redux 重點 redux可以說是flux 函式式程式設計的乙個結合體 說明 要求 mobx flux這個架構...