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);
  • 相关阅读:
    consul服务注册于发现
    zookeeper注册服务中心
    Eureka自我保护机制
    发现服务
    修改主机名
    Eureka集群原理与搭建
    Eureka服务注册中心
    微服务简单规划
    开启多服务一键启动 run DashBoad,重启idea
    手撕代码:判断二进制串除以3的余数
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5185401.html
Copyright © 2011-2022 走看看