基本使用例子

index.js

import ReactDOM from 'react-dom';
import App from './App';
import store from './store/index'

ReactDOM.render(
  <App />,
  document.getElementById('root')
);
store.subscribe(() => ReactDOM.render(
  <App />,
  document.getElementById('root')
))

App.js

import React, { Component } from 'react';
import Child from './Child'
export default class App extends Component {
  render() {
    return (
        <div>
            这是父组件：<br/>
            <Child/>
        </div>
    );
  }
}

Child.jsx

import { Component } from 'react';
import store from './store'
import addNum from './store/actions';

class App extends Component {
  addNum = () => {
    let num = store.getState();
    store.dispatch(addNum(num+1))
  }
  render() {
    return (
      <div>
          这是孩子组件：<br/>
          <p>{store.getState()}</p>
          <button onClick={this.addNum}>点我 加</button>
      </div>
    );
  }
}
export default App;

store文件夹下的 index.js ,整个工程只能有一个store

import { createStore } from 'redux'
import {Num} from './reducers.js'

let store = createStore(Num);
export default store;

store文件夹下的 actions.js action的创造函数

export default function addNum (data){
    return {
        type:'Add',
        data
    }
}

reducers.jsx

export const Num = (state = 0, action) => {
    if (action.type === 'Add') {
        return action.data;
    }
    return state;
};

思想：
1、createStore(reducer) 生成store，整个项目只有一个store
2、store.getState()获取 store的值
3、store.dispatch(action对象) 处发store中值的更改（其中store会自动调用reducer）
4、store.subscribe(函数) 当store中值变更，处发函数

简单升级--多个reducers

import {combineReducers} from 'redux';
export default combineReducers({
aaa,
bbb,
});

注意：当combineReducers后，store.getState() 就变成了一个对象，属性就是reducers的key
reducer对于引用类型的数据更改，要进行拷贝(...或Object.assign)，否则检测数据引用地址不变，dom不更新

异步action

npm i redux-thunk
store文件夹 index.js

import { createStore, applyMiddleware } from 'redux'
import reducers from './reducers.js'
import thunk from 'redux-thunk'

let store = createStore(reducers,applyMiddleware(thunk));
export default store;

store文件夹 actions.js

export function addNum (data){
    return {
        type:'Add',
        data
    }
}

export function asyncAddNum (data,time){
    return (dispatch) =>{
        setTimeout(()=>{
            dispatch(addNum(data))
        },time)
    }
}

Child.jsx

import { Component } from 'react';
import store from './store'
import {asyncAddNum} from './store/actions';

class App extends Component {
  addNum = () => {
    let num = store.getState().num;
    console.log('store',num)
    store.dispatch(asyncAddNum(num+1,2000))
  }
  render() {
    return (
      <div>
          这是孩子组件：<br/>
          <p>{store.getState().num}</p>
          <button onClick={this.addNum}>点我 加</button>
      </div>
    );
  }
}
export default App;

思想：
1、异步action 返回的是一个函数