bindActionCreators

import * as listActions from './action/actiosCreator'
class App extends React.Component {
  render() {
    const {listActions : {addUserItem, removeUserItem}} = this.props
    return (
      <div>
        <ul>
          {this.props.list.map((item, index) => (
            <li style={{ background: 'pink', marginTop: '10px' }} key={index} onClick={() => { removeUserItem(index) }}>
              <span>{item.name}</span> ----------- <span>{item.age}</span>
            </li>
          ))}
          <button onClick={() => addUserItem({name: 'meow', age: 85})}>添加</button>
        </ul>
      </div>
    )
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    listActions : bindActionCreators(listActions , dispatch)
  }
}
// 如果想传入单个 action 
// export default connect(mapStateToProps, {addUserItem: listActions .addUserItem })(App);
export default connect(mapStateToProps, mapDispatchToProps)(App);

combineReducers

import {user} from './reducerUser'
import {combineReducers} from 'redux'
const rootReducer = combineReducers({
    user
})
export default rootReducer

const mapStateToProps = (state) => {
  return {
    list: state.user
  }
}

中间件

import { createStore, applyMiddleware, compose } from 'redux';
import rootReducer from './reducer'
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

// ES 5
const logger = function (store) {
  return function(next){
    return function(action) {
      console.log('dispatch', action)
      let result = next(action)
      console.log('state', store.getState())
      return result
    }
  }
}
// ES 6
const logger = store => next => action => {
  console.log('dispatch', action)
  let result = next(action)
  console.log('state', store.getState())
  return result
}
const store = createStore(rootReducer, composeEnhancers(
    applyMiddleware(logger)
  ));
export default store

redux-thunk

普通 action

export const addUserItem = (data) => {
  return {
    type: ADD_ITEM,
    data
  }
}

异步 action

export const delayAddUserItem = (data) => {
 return (dispatch, getState) => {
     setTimeout(() => {
       dispatch(delayAddUserItem)
    }, 1000)
     return /**这里的返回值页面可以获取到**/
   }
}

redux-thunk 核心代码

const thunk = ({ dispatch, getState }) => next => action => {
  if (typeof action === 'function') {
    return action(dispatch, getState);
  }
  return next(action);
};

redux-saga

新建 saga.js

import {delay, put, call, takeEvery, all } from 'redux-saga/effects';
import {ADD_ITEM, REMOVE_ITEM} from './action/actionTypes';
import {addUserItem, removeUserItem} from './action/actiosCreator'
const callback = (msg) => {
  console.log(msg);
};
export function* delayChangeBtnText(action) {
  console.log(action) // 触发的 action {type: 'ADD_ITEM'}
  yield delay(1000); // 延迟 1s
  const json = yield fetch('http://localhost:3000/api')
  const res = yield json.json()
  //  dispatch
  yield put(removeUserItem(res.index));
  // call(回调, 参数)
  yield call(callback, 'complete');
}
 function * watchGetHeader() { // 监听器
  yield takeEvery(ADD_ITEM, delayChangeBtnText) // 当执行 ADD_ITEM 的 action 的时候， 触发这个回调
}
export default function* rootSage() {   // 整合多个 监听器
  yield all([
    watchGetHeader()
  ])
}

import createSagaMiddleware from 'redux-saga';
import rootSage from './sagas';
const store = createStore(rootReducer, composeEnhancers(
  applyMiddleware(sagaMiddleware)
));
sagaMiddleware.run(rootSage);

redux-saga 更像是一种 action 之后的副作用