Redux

Redux 是 JavaScript 状态容器,提供可预测化的状态管理

Redux 是 flux 架构的一个实现

Flux 是一种架构思想,专门解决软件的结构问题。使用 MVC 编程的思想来编写代码。

Redux 由 Flux 演变而来,但受 Elm 的启发,避开了 Flux 的复杂性。
不管你有没有使用过它们,只需几分钟就能上手 Redux。

Install

npm install --save redux
npm install --save react-redux 
npm install --save-dev redux-devtools

Basis

实例化一个 redux 就是一个 store

store 由 subscribe 、dispatch、getState 三部分组成

createStore

使用 createStore 来创建一个 store 数据对象

subscribe

订阅数据的变化,当数据变化后会执行该回调函数	

dispatch

需要改变数据,就调用一次 dispatch

Code

import { createStore } from 'redux';

//控制数据如何变化
function counter(state = 0, action = {}) {
  switch (action.type) {
  case 'add':
    return state + 1;
  default:
    return state;
  }
}

// 创建一个 store
let store = createStore(counter);

//订阅数据的变化,当数据变化后会执行该回调函数
store.subscribe(() => {
	//输出变化后的数据
	console.log(store.getState());	
});

//需要改变数据,就调用一次 dispatch
store.dispatch({
	type: 'add'
});

react-redux

在应用中,只有顶层组件是对 Redux 可知(例如路由处理)这是很好的。所有它们的子组件都应该是简单的,所有数据都是通过 props 获取而来。

app.js

import { render } from 'react-dom';
import { Provider, connect } from 'react-redux';
import { AppComponent } from './appcomponent';
import { mapStateToProps, mapDispatchToProps, store } from './store';


// 生成一个新的组件
const App = connect(
  	mapStateToProps,
  	mapDispatchToProps
)(AppComponent);

render(
	<Provider store={ store }>
		<App />
	</Provider>,
	document.getElementById('app')
)

appcomponent.js

import { createClass, PropTypes } from 'react';

// React createClass
const AppComponent = createClass ({
	//设置 props 数据类型
	propTypes : {
		value: PropTypes.number.isRequired,
		onIncreaseClick: PropTypes.func.isRequired
	},
	render : function() {
		const { value, onIncreaseClick } = this.props;
		return (
			<div>
				<span>{ value }</span>
				<button onClick={ onIncreaseClick }> Click </button>
			</div>
		);
	}
});

export { AppComponent };

store.js

import { createStore } from 'redux';

// 定义数据的行为,什么情况下触发这个数据
const addAction = { 
	type: 'add' 
};

// 声明数据具体如何变化
function counter(state = { count: 0 }, action = {}) {
  	const count = state.count
  	switch (action.type) {
    	case 'add':
      		return { 
      			count: count + 1 
      		};
    	default:
      		return state;
  	}
}

// 将修数据传递给组件
function mapStateToProps(state) {
	return {
		value: state.count
	}
}

// 改变数据
function mapDispatchToProps(dispatch) {
  	return {
		onIncreaseClick: () => {
			return dispatch(addAction);
		}
  	}
}

// 创建一个数据对象
const store = createStore(counter);

export { mapStateToProps, mapDispatchToProps, store };