react-redux
store:圖書管理員
Component:借書用戶
Action:用戶說的話(要借什么書)
Reducer:記錄本
Store
//安裝Redux
yarn add redux
在src目錄下新建一個(gè)名為store的文件夾,并創(chuàng)建一個(gè)index.js塘娶,此為store
倉庫的內(nèi)容區(qū)域免绿。基本步驟如下:
//1. 從redux中導(dǎo)入一個(gè)createStore的方法。
import {createStore} from 'redux';
//2. 創(chuàng)建一個(gè)store
const store = createStore();
//3. 暴露模塊
export default store
有了倉庫store后予权,必須同時(shí)把reducer傳給store站刑。
只有store的話,他什么都不知道敲街,所以創(chuàng)建一個(gè)reducer:
//1. 在store的同級(jí)目錄下新建一個(gè)reducer.js
//在redux中团搞,reducer需要返回一個(gè)函數(shù)
const defaultState = {} //默認(rèn)什么數(shù)據(jù)都不存儲(chǔ)
export default (state = defaultState,action)=>{ //state:整個(gè)store倉庫里的數(shù)據(jù)
//還需返回一個(gè)內(nèi)容,先默認(rèn)返回state多艇;
return state;
}
store.subscribe() //訂閱
reducer
==reducer可以接受state==逻恐,但絕不可以修改state
- 創(chuàng)建好reducer后,將其傳遞給store
import reducer from './reducer'
- 創(chuàng)建store的時(shí)候峻黍,把reducer傳遞給store
const store = createStore();
- reducer存儲(chǔ)著整個(gè)項(xiàng)目應(yīng)用中的數(shù)據(jù)复隆,這時(shí)候store就知道了倉庫里數(shù)據(jù)有多少。
- 可以去reducer里查看姆涩,reducer管理倉庫里的數(shù)據(jù)(怎么處理挽拂,怎么存)
- reducer必須返回一個(gè)函數(shù)。
action(改變store的數(shù)據(jù)骨饿,做通信)
//創(chuàng)建一個(gè)action
const action = { //借書的同學(xué)說的一句話轻局,
type:'change_input_value', //type說的話,值是你幫我去改變input的值
value:e.target.value //這個(gè)值應(yīng)該是這處的value
}
dispatch
store通過dispatch把a(bǔ)ction傳遞給store样刷,但此時(shí)store不知道該怎么處理仑扑,所以又會(huì)去找reducer,store會(huì)把當(dāng)前的prevState和action傳給reducer置鼻。
redux會(huì)自動(dòng)把store里的prevState和action傳給reducer
//
store.diapatch(action); //action傳給store
此時(shí)reducer拿到了數(shù)據(jù)后镇饮,對(duì)數(shù)據(jù)進(jìn)行處理
因?yàn)?strong>reducer可以接受state,但絕不可以修改state**箕母,所以給state做一個(gè)深拷貝储藐,這是固定的做法俱济。最后把拷貝的數(shù)據(jù)return 出去。(return以后钙勃,返回給了store)