react-redux-action

Action 是把数据从应用(view等)传到 store 的有效载荷，store.dispatch() 将 action 传到 store。

//尽量减少在 action 中传递的数据
//action创建函数创建action

const addTodo=(text)=>{
    return {
        type:"ADD_TODO",
        id:todoId++,
        text
    }
}

单独的模块存放action

import { ADD_TODO, REMOVE_TODO } from '../actionTypes'

Redux 中只需把 action 创建函数的结果传给 dispatch() 方法即可发起一次 dispatch 过程。

dispatch(addTodo(text))

//或者创建一个 被绑定的 action 创建函数 来自动 dispatch：

const boundAddTodo = text => dispatch(addTodo(text))
boundAddTodo(text);

//惟一使用 bindActionCreators(actionCreators, dispatch) 的场景是:
把 action creator 往下传到一个组件上，却不想让这个组件觉察到 Redux 的存在，而且不希望把 Redux store 或 dispatch 传给它。

//把 action creators 转成拥有同名 keys 的对象，再使用dispatch把每个 action creator 包起来可以直接调用。

//TodoActionCreators.js：

export function addTodo(text) {
  return {
    type: 'ADD_TODO',
    text
  };
}

export function removeTodo(id) {
  return {
    type: 'REMOVE_TODO',
    id
  };
}

//SomeComponent.js

import { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import * as TodoActionCreators from './TodoActionCreators';

class TodoListContainer extends Component {
  componentDidMount() {
    // 由 react-redux 注入：
    let { dispatch } = this.props;
    let action = TodoActionCreators.addTodo('Use Redux');
    dispatch(action);
  }

  render() {
    let { todos, dispatch } = this.props;

    // 这是应用 bindActionCreators 比较好的场景：
    // 在子组件里，可以完全不知道 Redux 的存在。

    let boundActionCreators = bindActionCreators(TodoActionCreators, dispatch);

    return (
      <TodoList todos={todos} {...boundActionCreators} />
    );

    // 或者
    //return <TodoList todos={todos} dispatch={dispatch} />;
  }
}

export default connect(
  state => ({ todos: state.todos })
)(TodoListContainer)