三大原则
单一数据源
整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。
State 是只读的
唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。
使用纯函数来执行修改
为了描述 action 如何改变 state tree ，你需要编写 reducers。
reducers是一些纯函数，接口当前state和action。只需要根据action，返回对应的state。而且必须要有返回。
一个函数的返回结果只依赖于它的参数，并且在执行过程里面没有副作用，我们就把这个函数叫做纯函数
核心概念
State
state 数据源初始值，其它的代码不能随意修改它，只能通过发起一个action去
{
todos: [{
text: 'Eat food',
completed: true
}, {
text: 'Exercise',
completed: false
}],
visibilityFilter: 'SHOW_COMPLETED'
}
Action
顾名思义，action就是动作，也就是通过动作来修改state的值。也是修改store的唯一途径。
action本质上就是一个普通js对象，我们约定这个对象必须有一个字段type，来表示我们的动作名称。一般我们会使用一个常量来表示type对应的值。
此外，我们还会把希望state变成什么样子的对应的值通过action传进来，那么这里action可能会类似这样子的
{ type: 'ADD_TODO', text: 'Go to swimming pool' }
{ type: 'TOGGLE_TODO', count: 2 }
{ type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }
Reducer
action 就像是描述发生了什么的指示器。最终，为了把 action 和 state 串起来，开发一些函数，这就是 reducer。再次地，没有任何魔法，reducer 只是一个接收 state 和 action，并返回新的 state 的函数。 Reducer作为纯函数，内部不建议使用任何有副作用的操作，比如操作外部的变量，任何导致相同输入但输出却不一致的操作。
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'; //异步请求 需要thunk中间件
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
// redux 3个组成部分 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]), // 需要使用的中间件数组
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
),
); //创建一个store
console.log(store); // dispatch getState ...
console.log(store.getState()); // {count: 1}
// 如果需要改变一个reducer的值，需要使用dispatch派发一个action
// action需要2个参数
// type 通过type区分是对state做什么操作
// payload 载荷 传递的数据（参数）
store.dispatch({
type: 'COUNT_ADD',
payload: {},
})
// 异步时使用thunk中间件，第一个参数为dispatch方法，可以请求数据后在用参数dispatch做派发
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'));
