npm install --save redux
npm install --save react-redux          // React 绑定库
npm install --save-dev redux-devtools   //开发者工具

const createStore = (reducer) => {
  let state;
  let listeners = [];

  const getState = () => state;

  const dispatch = (action) => {
    state = reducer(state, action);
    listeners.forEach(listener => listener());
  };

  const subscribe = (listener) => {
    listeners.push(listener);
    return () => {
      listeners = listeners.filter(l => l !== listener);
    }
  };

  dispatch({});

  return { getState, dispatch, subscribe };
};

import { createStore } from 'redux';

/**
 * 这是一个 reducer，形式为 (state, action) => state 的纯函数。
 * 描述了 action 如何把 state 转变成下一个 state。
 *
 * state 的形式取决于你，可以是基本类型、数组、对象、
 * 甚至是 Immutable.js 生成的数据结构。惟一的要点是
 * 当 state 变化时需要返回全新的对象，而不是修改传入的参数。
 *
 * 下面例子使用 `switch` 语句和字符串来做判断，但你可以写帮助类(helper)
 * 根据不同的约定（如方法映射）来判断，只要适用你的项目即可。
 */
function counter(state = 0, action) {
  switch (action.type) {
  case 'INCREMENT':
    return state + 1;
  case 'DECREMENT':
    return state - 1;
  default:
    return state;
  }
}

// 创建 Redux store 来存放应用的状态。
// API 是 { subscribe, dispatch, getState }。
let store = createStore(counter);

// 可以手动订阅更新，也可以事件绑定到视图层。
store.subscribe(() =>
  console.log(store.getState())
);

// 改变内部 state 惟一方法是 dispatch 一个 action。
// action 可以被序列化，用日记记录和储存下来，后期还可以以回放的方式执行
store.dispatch({ type: 'INCREMENT' });
// 1
store.dispatch({ type: 'INCREMENT' });
// 2
store.dispatch({ type: 'DECREMENT' });
// 1

import 'core-js/fn/object/assign';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/Main';
import {createStore} from 'redux';
import {Provider} from 'react-redux';
import todoApp from 'stores/reducers.js';

export let store = createStore(todoApp);

// Render the main component into the dom
ReactDOM.render(
  <Provider store = {store}>
    <App />
  </Provider>,
  document.getElementById('app')
);

require('normalize.css/normalize.css');
require('styles/App.css');

import React from 'react';
import {connect} from 'react-redux';
import {store} from '../index'
import {changeStyle} from '../actions/actions.js'

import yeomanImage from '../images/yeoman.png'
//let yeomanImage = require('../images/yeoman.png');

class AppComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  handleClick(e){
    store.dispatch(changeStyle())    //这个changeStyle是从actions引进的，action其实就是用来修改状态的
  }
  render() {
    //从组件的props属性中导入actions里的方法和变量
    const {dispatch,propsStyle} = this.props;

    return (
      <div className="index">
        <img src={yeomanImage} alt="Yeoman Generator" />
        {propsStyle}

        <div onClick={this.handleClick.bind(this)}>Please edi to get started!</div>
      </div>
    );
  }
}

function select(state) {
  return {
    //将我们需要的state中的数据绑定到props上
    propsStyle:state.propsStyle
  }
}

 export default connect(select)(AppComponent);
//export default AppComponent;

export const change = 'change';

export function changeStyle(text) {
  return {type:change,
          text:text
  }
}

import {combineReducers} from 'redux';
import {change} from '../actions/actions.js'

function propsStyle(state=0,action) {
  switch (action.type){
    case change:
      return state +1
    default:          //必须有
      return state
  }

}
const todoApp = combineReducers({
  propsStyle       //这个属性名propsStyle必须和函数propsStyle同名  表示通过这个函数处理后的state的值为state.propsStyle  connect会将state.propsStyle赋值到props
})
export default todoApp;