参考阮一峰文章
阮一峰
运用到Redux的情况
- 某个组件的状态，需要共享
- 某个状态需要在任何地方都可以拿到
- 一个组件需要改变全局状态
- 一个组件需要改变另一个组件的状态
架构跟React有点相似，语法都是使用jsx语法，以下的例子需要结合webpack进行操作打包，才可以在网页中显示。
Store
就是保存数据的地方，你可以把它看成一个容器。整个应用只能有一个 Store。
Redux提供createStore这个函数，用来生成Store
import { createStore } from 'redux';
const store = createStore(fn);
上面代码中，createStore函数接受另一个函数作为参数，返回新生成的 Store 对象。fn函数返回的值就作为store的数据存储起来。所以可以用这样的方式调用fn函数。
State
Store对象包含所有数据。State是Store某个时刻的值。
当前时刻的 State，可以通过store.getState()拿到。
import { createStore } from 'redux';
const store = createStore(fn);
const state = store.getState();
在该例子中，state是只读的。最好把 State 对象设成只读。你没法改变它，要得到新的 State，唯一办法就是生成一个新对象。这样的好处是，任何时候，与某个View对应的 State总是一个不变的对象
Action
state 的变化，会导致 View的变化。但是，用户接触不到 State，只能接触到View。所以，State 的变化必须是 View 导致的。Action就是View发出的通知，表示 State应该要发生变化了。
Action是一个对象。其中的type属性是必须的，表示Action 的名称。其他属性可以自由设置
var action = addTodo('add','okok');
function addTodo (TYPE,TEXT) {
return {
type:TYPE,
text:TEXT
}
}
可以通过函数的形式创建action，也可以直接创建
var action = {
type: 'add',
text: 'okok'
}
store.dispatch()
store.dispatch()是View 发出 Action 的唯一方法，view的变化带动dispatch发出action，引发下一个行为。
store.dispatch(action)
Reducer
Reducer是一个函数，它接受Action和当前State作为参数，返回一个新的State。
function reducer(){
if (typeof(state) !== 'undefined')
defaultState = state;
switch (action.type) {
case 'add':
return defaultState + action.text;
default:
return defaultState;
}
};
reducer必须是个函数，若不是个函数就会报错。
纯函数
Reducer 函数最重要的特征是，它是一个纯函数。也就是说，只要是同样的输入，必定得到同样的输出。
判断纯函数的几个特征
- 给出相同输入，总是返回相同的输出。
- 不产生副作用
- 不依赖外部状态
store.subscribe()
Store允许使用store.subscribe方法设置监听函数，一旦State发生变化，就自动执行这个函数。
import { createStore } from 'redux';
const store = createStore(reducer);
store.subscribe(listener);
只要把 View的更新函数（对于 React 项目，就是组件的render方法或setState方法）放入listen，就会实现View的自动渲染。
store.subscribe方法返回一个函数，调用这个函数就可以解除监听。
let unsubscribe = store.subscribe(() =>
console.log(store.getState())
);
unsubscribe();
Reducer的拆分
在redux中不同的函数负责处理不同属性，最终把它们合并成一个大的 Reducer。用combineReducers()方法合并起来，该函数根据 State 的 key 去执行相应的子 Reducer，并将返回结果合并成一个大的State对象
工作流程
-
view的变化，可以是点击事件 - 引发
dispatch发出action -
Store自动调用Reducer，并且传入两个参数当前State和收到的Action。Reducer会返回新的State。 - 观察变化，用
subscribe时刻监听变化
Redux一般是跟React一起合作构成ui和数据的相互配合，当然，Redux还可以与其他架构配合，不一定需要与React合作。
示例：
//app.jsx
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import React from 'react';
var action = addTodo('add','okok');
function addTodo (TYPE,TEXT) {
return {
type:TYPE,
text:TEXT
}
}
var defaultState = 0;
const store = createStore(reducer);
function reducer(){
if (typeof(state) !== 'undefined')
defaultState = state;
switch (action.type) {
case 'add':
return defaultState + action.text;
default:
return defaultState;
}
};
const state = store.getState();
console.log(store);
store.subscribe(reducer);
//webpack.config.js
var webpack = require('webpack');
module.exports = {
entry: './app.jsx',
output: {
filename: 'bundle.js'
},
module: {
loaders:[
{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: 'babel-loader?presets[]=es2015&presets[]=react'
},
]
}
};
//index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="example"></div>
<script src="bundle.js"></script>
</body>
</html>