React Redux
学习目标
- Redux基本知识
- Redux基本用法
Redux组成
Redux是Flux的脚本库，包含Action,Action生成器、Store、以及用于修改State的Action对象。
Redux对Flux概念进行简化（移除Dispatcher），同时引入Reducer（纯函数）。Reducer 根据当前的State和Action返回一个新的State：(state, action) => newState。
-
单向数据流
-
唯一数据源
-
保持状态可读
-
组件数据的改变只能通过Reducer完成
-
store （ http://cn.redux.js.org/docs/basics/Store.html）
-
形式为 (state, action) => state 的纯函数。
-
描述了 action 如何把 state 转变成下一个 state。
-
state 的形式取决于你，可以是基本类型、数组、对象
-
要点：当 state 变化时需要返回全新的对象，而不是修改传入的参数。
-
store方法
-
getState()
-
dispatch(action)
-
subscribe(listener)
-
replaceReducer(nextReducer)
-
-
使用之前需要新建仓库，仓库依赖于reducer函数。
const store = createStore(reducer);-
reducer
Reducer：纯函数，接收2个参数。第一个参数：state(累积对象）。第二个参数：action。Reducer函数根据action.type的不同对旧state进行操作，最后返回新的state。这个state是下一次的累积对象。
- 形式为 (state, action) => state 的纯函数。
- 描述了 action 如何把 state 转变成下一个 state。
- state 的形式取决于你，可以是基本类型、数组、对象
- 要点：当 state 变化时需要返回全新的对象，而不是修改传入的参数。
const reducer = function(state = {num:0}, action) {
switch(action.type) {
case "add":
state.num++;
break;
case "decrement":
state.num--;
break;
default:
break;
}
return {...state}; // 重点（重新结构，创建新的对象） 相当于对象的COPY
// return state; // 新版本这样写没有问题
}type是action的必须参数，用来说明操作。state包含数据。
function add() { // 通过仓库方法dispatch 修改数据
// 修改数据（通过动作修改数据）
store.dispatch({type:"add", content:{id:1,msg:"helloworld"}})
console.log(store.getState())
}
function decrement() { // 通过仓库方法dispatch 修改数据
store.dispatch({type:"decrement"})
console.log(store.getState())
}store通过dispatch分发 action。这是触发 state 变化的惟一途径。
解决React数据管理（状态管理），用于中大型，数据比较庞大，组件之间数据交互多的情况下使用。如果你不知道是否需要使用Redux，那么你就不需要用它！
-
解决组件的数据通信。
-
解决数据和交互较多的应用
Redux只是一种状态管理的解决方案！
-
Store:数据仓库，保存数据的地方。
-
State:state是1个对象，数据仓库里的所有数据都放到1个state里。
-
Action:1个动作，触发数据改变的方法。
-
Dispatch:将动作触发成方法
-
Reducer:是1个函数，通过获取动作，改变数据，生成1个新state。从而改变页面
安装：cnpm install redux --save
实例一 计数器增加/减少
import React from 'react';
import ReactDOM from 'react-dom';
import {createStore} from 'redux';
//用于通过动作，创建新的state
const reducer = function(state = {num:0}, action) {
switch(action.type) {
case "add":
state.num++;
break;
case "decrement":
state.num--;
break;
default:
break;
}
return {...state}; // 重点（重新结构，创建新的对象） 相当于对象的COPY
// return state; // 新版本这样写没有问题
}
//创建仓库
const store = createStore(reducer);
function add() { // 通过仓库方法dispatch 修改数据
// 修改数据（通过动作修改数据）
store.dispatch({type:"add", content:{id:1,msg:"helloworld"}})
console.log(store.getState())
}
function decrement() { // 通过仓库方法dispatch 修改数据
store.dispatch({type:"decrement"})
console.log(store.getState())
}
//函数计数器
const Counter = function(props) {
let state = store.getState(); //获取数据
return (
<div>
<h1>计数数量：{state.num}</h1>
<button onClick={add}>加1</button>
<button onClick={decrement}>减1</button>
</div>
)
}
ReactDOM.render(
<Counter />,
document.querySelector('#root')
)
//修改视图（监听数据的变化，重新渲染内容）
store.subscribe(() => { // 监听数据改变，页面会同步改变
ReactDOM.render(
<Counter />,
document.querySelector('#root')
)
})实例二 Redux简单实例
import React from 'react';
import ReactDOM from 'react-dom';
import {createStore} from 'redux';
const reducer = function(state = {num:1}, action) {
switch (action.type) {
case 'add':
state.num = addNum(state.num)
break;
case 'decrement':
state.num--
break;
default:
break;
}
return {...state};
}
const store = createStore(reducer);
function add() {
store.dispatch({type:"add"})
}
function addNum(n) {
return n+1;
}
function HandleDecr() {
const action = {
type: 'decrement'
}
store.dispatch(action)
}
const CounterCom = function () {
let state = store.getState(); // 获取当前数据
console.log(state)
return (
<div>
<button onClick={HandleDecr}>-</button>
<span>{state.num}</span>
<button onClick={add}>+</button>
</div>
)
}
ReactDOM.render(
<CounterCom/>,
document.querySelector('#root')
)
store.subscribe(() => {
ReactDOM.render(
<CounterCom/>,
document.querySelector('#root')
)
})加、减对应2种写法，减法是标准的写法，加法是通过函数实现，说明可以通过回调函数实现。