初识redux

React 是一个用于构建用户界面的 Javascript 库。

React主要用于构建UI，很多人认为 React 是 MVC 中的
V（视图）。

react 只涉及 view 层, React 只是 DOM 的一个抽象层，并不是 Web 应用的完整解决方案。有两个方面，它没涉及。

• 代码结构
• 组件之间通信

而 redux正好能解决这两件事

1.Store

Store 就是保存数据的地方。

import { createStore } from 'redux';
const store = createStore(fn);
const state = store.getState();

createStore(reduces, globalState)
createStore函数接受另一个函数作为参数，返回新生成的 Store 对象

2.Action

State 的变化，会导致 View 的变化。用户无法直接改变State, 只能触发上绑定的事件。Action 就是 View 发出，表示 State 应该要发生变化了。

const action = {
type: 'ADD_TODO',
payload: 'Learn Redux'
};

3.Action Creator

const ADD_TODO = '添加 TODO';
function addTodo(text) {
return {
type: ADD_TODO,
text
}
}
const action = addTodo('Learn Redux');

定义一个函数来生成 Action，这个函数就叫 Action Creator。

4.store.dispatch()

store.dispatch()是 View 发出 Action 的唯一方法。表示 State 应该要发生变化了。

import { createStore } from 'redux';
const store = createStore(fn);
store.dispatch({
type: 'ADD_TODO',
payload: 'Learn Redux'
});

5.Reducer

Store 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。

6.store.subscribe()

Store 允许使用store.subscribe方法设置监听函数，一旦 State 发生变化，就自动执行这个函数。

import { createStore } from 'redux';
const store = createStore(reducer);
store.subscribe(listener);一个极简的 redux 例子

simplest-redux-examp(https://github.com/jackielii/&＃8230;

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import { Provider, connect } from 'react-redux'
// React 组件
class Counter extends Component {
render() {
const { value, onIncreaseClick } = this.props
return (


Redux 入门教程-阮一峰