三大原則
單一數(shù)據(jù)源
整個(gè)應(yīng)用的 state 被儲(chǔ)存在一棵 object tree 中根悼，并且這個(gè) object tree 只存在于唯一一個(gè) store 中赚爵。
State 是只讀的
唯一改變 state 的方法就是觸發(fā) action，action 是一個(gè)用于描述已發(fā)生事件的普通對(duì)象村怪。
使用純函數(shù)來執(zhí)行修改
為了描述 action 如何改變 state tree 秽浇，你需要編寫 reducers。
reducers是一些純函數(shù)甚负，接口當(dāng)前state和action柬焕。只需要根據(jù)action，返回對(duì)應(yīng)的state梭域。而且必須要有返回斑举。
一個(gè)函數(shù)的返回結(jié)果只依賴于它的參數(shù)，并且在執(zhí)行過程里面沒有副作用病涨，我們就把這個(gè)函數(shù)叫做純函數(shù)
核心概念
State
state 數(shù)據(jù)源初始值富玷，其它的代碼不能隨意修改它，只能通過發(fā)起一個(gè)action去
{
todos: [{
text: 'Eat food',
completed: true
}, {
text: 'Exercise',
completed: false
}],
visibilityFilter: 'SHOW_COMPLETED'
}
Action
顧名思義既穆，action就是動(dòng)作赎懦，也就是通過動(dòng)作來修改state的值。也是修改store的唯一途徑循衰。
action本質(zhì)上就是一個(gè)普通js對(duì)象，我們約定這個(gè)對(duì)象必須有一個(gè)字段type褐澎，來表示我們的動(dòng)作名稱会钝。一般我們會(huì)使用一個(gè)常量來表示type對(duì)應(yīng)的值。
此外，我們還會(huì)把希望state變成什么樣子的對(duì)應(yīng)的值通過action傳進(jìn)來迁酸，那么這里action可能會(huì)類似這樣子的
{ type: 'ADD_TODO', text: 'Go to swimming pool' }
{ type: 'TOGGLE_TODO', count: 2 }
{ type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }
Reducer
action 就像是描述發(fā)生了什么的指示器先鱼。最終，為了把 action 和 state 串起來奸鬓，開發(fā)一些函數(shù)焙畔，這就是 reducer。再次地串远，沒有任何魔法宏多，reducer 只是一個(gè)接收 state 和 action，并返回新的 state 的函數(shù)澡罚。 Reducer作為純函數(shù)伸但，內(nèi)部不建議使用任何有副作用的操作，比如操作外部的變量留搔，任何導(dǎo)致相同輸入但輸出卻不一致的操作更胖。
const visibilityFilter = (state = 'SHOW_ALL', action) => {
if (action.type === 'SET_VISIBILITY_FILTER') {
return action.filter;
} else {
return state;
}
}
const todos = (state = [], action) => {
switch (action.type) {
case 'ADD_TODO':
return state.concat([{ text: action.text, completed: false }]);
case 'TOGGLE_TODO':
return state.map((todo, index) =>
action.index === index ?
{ text: todo.text, completed: !todo.completed } :
todo
)
default:
return state;
}
}
Redux使用
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, combineReducers, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk'; //異步請(qǐng)求 需要thunk中間件
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
// redux 3個(gè)組成部分 action reducer state(store);
const countReducer = function(state = { count: 1 }, action) {
switch(action.type) {
case 'COUNT_ADD':
return {
...state,
count: state.count + 1
}
default:
return state
}
}
const postReducer = function(state = { list: [{ title: 'hello'}]}, action) {
switch(action.type) {
case 'LOAD_POSTS':
return {
...state,
list: action.payload
}
default:
return state
}
}
const rootReducers = combineReducers({
count: countReducer,
post: postReducer
})
const store = createStore(
rootReducers,
compose(
applyMiddleware(...[thunk]), // 需要使用的中間件數(shù)組
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
),
); //創(chuàng)建一個(gè)store
console.log(store); // dispatch getState ...
console.log(store.getState()); // {count: 1}
// 如果需要改變一個(gè)reducer的值，需要使用dispatch派發(fā)一個(gè)action
// action需要2個(gè)參數(shù)
// type 通過type區(qū)分是對(duì)state做什么操作
// payload 載荷 傳遞的數(shù)據(jù)（參數(shù)）
store.dispatch({
type: 'COUNT_ADD',
payload: {},
})
// 異步時(shí)使用thunk中間件隔显，第一個(gè)參數(shù)為dispatch方法却妨，可以請(qǐng)求數(shù)據(jù)后在用參數(shù)dispatch做派發(fā)
store.dispatch(async(dispatch) => {
let res = await fetch('url');
dispatch({
type: 'LOAD_POSTS',
payload: res
})
})
console.log(store.getState()); // {count: 2}
ReactDOM.render(<App />, document.getElementById('root'));
