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);
  • 相关阅读:
    受限玻尔兹曼机 视频
    android textview空格占位符以及一些其他占位符汇总
    几种常见的Preference总结
    Android著名开源库
    Android 常用开源库总结(持续更新)
    2019最新Android常用开源库总结(附带github链接)
    Android gradle用exclude排除引用包中的dependency引用
    Gradle3.0新指令api、provided、implementation等对比
    jar包下载网站
    mac环境下Android 反编译
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5185401.html
Copyright © 2011-2022 走看看