zoukankan      html  css  js  c++  java
  • [Redux] Generating Containers with connect() from React Redux (VisibleTodoList)

    Learn how to use the that comes with React Redux instead of the hand-rolled implementation from the previous lesson.

    Code to be refactored:

    class VisibleTodoList extends Component {
      componentDidMount() {
        const { store } = this.context;
        this.unsubscribe = store.subscribe(() =>
          this.forceUpdate()
        );
      }
      
      componentWillUnmount() {
        this.unsubscribe();
      }
      
      render() {
        const props = this.props;
        const { store } = this.context;
        const state = store.getState();
        
        return (
          <TodoList
            todos={
              getVisibleTodos(
                state.todos,
                state.visibilityFilter
              )
            }
            onTodoClick={id =>
              store.dispatch({
                type: 'TOGGLE_TODO',
                id
              })            
            }
          />
        );
      }
    }
    
    VisibleTodoList.contextTypes = {
      store: React.PropTypes.object
    };

    In the code, we handle the 'context', subscribe state and unsubscribe. Also we need to always remember write 'contextTypes'. There are lots of things todo.

    Actually we can use 'ReactRedux' libaray to simpy our life:

    'ReactRedux' libaray's connect() fucntion also pass the context down to the component. 

    VisibleTodoList:

    So get the todos and write into mapStateToProps function:

    const mapStateToProps = (state) => {
      return {
        todos: getVisibleTodos(
          state.todos,
          state.visibilityFilter
        )
      };
    };

    then get onTodoClick dispatch function to the mapDispatchToProps function:

    const mapDispatchToProps = (dispatch) => {
      return {
        onTodoClick: (id) => {
          dispatch({
            type: 'TOGGLE_TODO',
            id
          });
        }
      };
    };

    then we can use 'connect()()' function to connect state, dispatch action and Render component together:

    const { connect } = ReactRedux;
    const VisibleTodoList = connect(
      mapStateToProps,
      mapDispatchToProps
    )(TodoList);

    -------------------------

    code:

    const mapStateToProps = (state) => {
      return {
        todos: getVisibleTodos(
          state.todos,
          state.visibilityFilter
        )
      };
    };
    
    const mapDispatchToProps = (dispatch) => {
      return {
        onTodoClick: (id) => {
          dispatch({
            type: 'TOGGLE_TODO',
            id
          });
        }
      };
    };
    
    const { connect } = ReactRedux;
    const VisibleTodoList = connect(
      mapStateToProps,
      mapDispatchToProps
    )(TodoList);
  • 相关阅读:
    67.ORM查询条件:range的使用,使用make_aware将navie time 转换为aware time
    65.ORM查询条件:gte,gt,lte和lt的使用
    66.Python中startswith和endswith的使用
    63.Python中contains和icontains
    64.Python中ORM查询条件:in和关联模型
    77.Q表达式详解
    76.Python中F表达式详解
    75.Python中ORM聚合函数详解:Sum
    74.Python中ORM聚合函数详解:Max,Min
    Cadence SPB 入门
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5185401.html
Copyright © 2011-2022 走看看