zoukankan      html  css  js  c++  java
  • 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)
  • 相关阅读:
    进入社会,我们要做哪些准备?
    2天玩转单反相机(第二讲)
    Google广告优化与工具
    Ext JS 4:模型剖析
    iphone开发教程(1) iOS大纲
    iPhone objectivec字符串类NSString的使用
    Ext JS 4倒计时:图形和图表
    Ext JS 4倒计时:开发者预览版
    WOSA介绍
    “苹果皮”与知识产权
  • 原文地址:https://www.cnblogs.com/avidya/p/8488798.html
Copyright © 2011-2022 走看看