I can't understand why components with 'connect()' are stateful in react











up vote
6
down vote

favorite












My question is just same as the title.



Let's say I wrote the following code.



class TODOList extends Component {  
render() {
const {todos, onClick} = this.props;
return (
<ul>
{todos.map(todo =>
<Todo
key={todo.id}
onClick={onClick}
{...todo}
/>
)}
</ul>
);
}
}


const mapStateToProps = (state) => {
return {
todos: state.todos
}
}


const mapDispatchToProps = (dispatch) => {
return {
onClick(data){
dispatch(complete(data))
}
}
}


export default connect(mapStateToProps,mapDispatchToProps)(TODOList);


Now, after the last line, this code will export the TODOList component with the state as props. It's not that it contains state, but just received state and will have them as 'props', just like the method name 'mapStateToProps' explains.



In the medium post(https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0) written by Dan Abramov, container component handles data as state, and presentational property do as props. Isn't it a presentational component that deals with data as props? I'm stuck with the idea that the right container should be one like below.



class CommentList extends React.Component {
this.state = { comments: };

componentDidMount() {
fetchSomeComments(comments =>
this.setState({ comments: comments }));
}
render() {
return (
<ul>
{this.state.comments.map(c => (
<li>{c.body}—{c.author}</li>
))}
</ul>
);
}
}


I'm not sure why react-redux named the API 'mapStateToProps', when I tried to make 'stateful'(not handling data by property) container component










share|improve this question


























    up vote
    6
    down vote

    favorite












    My question is just same as the title.



    Let's say I wrote the following code.



    class TODOList extends Component {  
    render() {
    const {todos, onClick} = this.props;
    return (
    <ul>
    {todos.map(todo =>
    <Todo
    key={todo.id}
    onClick={onClick}
    {...todo}
    />
    )}
    </ul>
    );
    }
    }


    const mapStateToProps = (state) => {
    return {
    todos: state.todos
    }
    }


    const mapDispatchToProps = (dispatch) => {
    return {
    onClick(data){
    dispatch(complete(data))
    }
    }
    }


    export default connect(mapStateToProps,mapDispatchToProps)(TODOList);


    Now, after the last line, this code will export the TODOList component with the state as props. It's not that it contains state, but just received state and will have them as 'props', just like the method name 'mapStateToProps' explains.



    In the medium post(https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0) written by Dan Abramov, container component handles data as state, and presentational property do as props. Isn't it a presentational component that deals with data as props? I'm stuck with the idea that the right container should be one like below.



    class CommentList extends React.Component {
    this.state = { comments: };

    componentDidMount() {
    fetchSomeComments(comments =>
    this.setState({ comments: comments }));
    }
    render() {
    return (
    <ul>
    {this.state.comments.map(c => (
    <li>{c.body}—{c.author}</li>
    ))}
    </ul>
    );
    }
    }


    I'm not sure why react-redux named the API 'mapStateToProps', when I tried to make 'stateful'(not handling data by property) container component










    share|improve this question
























      up vote
      6
      down vote

      favorite









      up vote
      6
      down vote

      favorite











      My question is just same as the title.



      Let's say I wrote the following code.



      class TODOList extends Component {  
      render() {
      const {todos, onClick} = this.props;
      return (
      <ul>
      {todos.map(todo =>
      <Todo
      key={todo.id}
      onClick={onClick}
      {...todo}
      />
      )}
      </ul>
      );
      }
      }


      const mapStateToProps = (state) => {
      return {
      todos: state.todos
      }
      }


      const mapDispatchToProps = (dispatch) => {
      return {
      onClick(data){
      dispatch(complete(data))
      }
      }
      }


      export default connect(mapStateToProps,mapDispatchToProps)(TODOList);


      Now, after the last line, this code will export the TODOList component with the state as props. It's not that it contains state, but just received state and will have them as 'props', just like the method name 'mapStateToProps' explains.



      In the medium post(https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0) written by Dan Abramov, container component handles data as state, and presentational property do as props. Isn't it a presentational component that deals with data as props? I'm stuck with the idea that the right container should be one like below.



      class CommentList extends React.Component {
      this.state = { comments: };

      componentDidMount() {
      fetchSomeComments(comments =>
      this.setState({ comments: comments }));
      }
      render() {
      return (
      <ul>
      {this.state.comments.map(c => (
      <li>{c.body}—{c.author}</li>
      ))}
      </ul>
      );
      }
      }


      I'm not sure why react-redux named the API 'mapStateToProps', when I tried to make 'stateful'(not handling data by property) container component










      share|improve this question













      My question is just same as the title.



      Let's say I wrote the following code.



      class TODOList extends Component {  
      render() {
      const {todos, onClick} = this.props;
      return (
      <ul>
      {todos.map(todo =>
      <Todo
      key={todo.id}
      onClick={onClick}
      {...todo}
      />
      )}
      </ul>
      );
      }
      }


      const mapStateToProps = (state) => {
      return {
      todos: state.todos
      }
      }


      const mapDispatchToProps = (dispatch) => {
      return {
      onClick(data){
      dispatch(complete(data))
      }
      }
      }


      export default connect(mapStateToProps,mapDispatchToProps)(TODOList);


      Now, after the last line, this code will export the TODOList component with the state as props. It's not that it contains state, but just received state and will have them as 'props', just like the method name 'mapStateToProps' explains.



      In the medium post(https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0) written by Dan Abramov, container component handles data as state, and presentational property do as props. Isn't it a presentational component that deals with data as props? I'm stuck with the idea that the right container should be one like below.



      class CommentList extends React.Component {
      this.state = { comments: };

      componentDidMount() {
      fetchSomeComments(comments =>
      this.setState({ comments: comments }));
      }
      render() {
      return (
      <ul>
      {this.state.comments.map(c => (
      <li>{c.body}—{c.author}</li>
      ))}
      </ul>
      );
      }
      }


      I'm not sure why react-redux named the API 'mapStateToProps', when I tried to make 'stateful'(not handling data by property) container component







      javascript reactjs






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked 4 hours ago









      Rhee

      533




      533
























          2 Answers
          2






          active

          oldest

          votes

















          up vote
          6
          down vote



          accepted










          First of all these guidelines are not part of the bible

          you should write code that is easy to reason about for YOU and your TEAM.



          I think you are missing something, A redux Container is different than a react Container.

          I mean, connect will create the container for you, it doesn't mean the wraped component is a Container.



          Basically you can export both versions from the same file, the Container (connected version) and the presentation version (the none connected one).



          Another thing that usually throw people off, is the name of the function and argument of mapStateToProps.

          I prefer the name mapStoreToProps as in




          map the redux store to the component's props.




          the name state can be confusing when we are in the context of react.



          Edit

          As a followup to your comment:




          I totally didn't know these two are actually different. Could you please tell me about more details




          They are different in the way that connect is creating a "Container" for you.



          connect is a High Order Component that creates the Container Component for us with all the subscription logic + functions to pass portions of the store and action-creators to its children as props (mapStateToProps & mapDispatchToProps).



          A "normal" Container is usually refers to a component that you write by hand, its often doesn't deal with how things should look but instead deal with certain logic of the app.



          As for the other comments like




          The connect HoC of react-redux just injects the properties you can request into your component. It returns a new component that is wrapped around your component so that it can update your component whenever the state you're interested in the redux store is modified




          As i mentioned above, this is partially true. It's not just injecting the properties into our component, its subscribing to the store, grabbing it from the Provider (via context) and its doing all these with optimizations in mind, so we won't have to do it by ourselves.




          I'm not sure how mapStateToProps can confuse someone. We are talking about a state management library




          I've seen some devs that misunderstood this because react has a state and redux has a store (at least that's how it was called in most of the tutorials and documentations).

          this can be confusing to some people that are new to either react or redux.



          Edit 2




          It was a bit confusing due to the sentence 'it doesn't mean the wraped component is a Container.' Why is the wrapped component not a container? Isn't a component created by connect also a container?




          I mean that the wrapped component that you wrote doesn't have to be a Container.

          You can connect a "Presentation" component:



          const Link = ({ active, children, onClick }) => {
          if (active) {
          return <span>{children}</span>
          }

          return (
          <a
          href=""
          onClick={e => {
          e.preventDefault()
          onClick()
          }}
          >
          {children}
          </a>
          )
          }

          // ...
          export default connect(mapState, mapDispatch)(Link)





          share|improve this answer























          • Thank you for your answer. But I don't understand this part : 'I think you are missing something, A redux Container is different than a react Container. I mean, connect will create the container for you, it doesn't mean the wraped component is a Container.' Yes, I totally didn't know these two are actually different. Could you please tell me about more details?
            – Rhee
            3 hours ago










          • I'm not sure how mapStateToProps can confuse someone. We are talking about a state management library.
            – Kyle Richardson
            3 hours ago






          • 1




            The connect HoC of react-redux just injects the properties you can request into your component. It returns a new component that is wrapped around your component so that it can update your component whenever the state you're interested in the redux store is modified.
            – Kyle Richardson
            3 hours ago






          • 1




            I've added some more details to answer some of the comments
            – Sagiv b.g
            3 hours ago






          • 1




            @Rhee I've answered you latest comment (Edit 2 section) Hope that's clarify it :)
            – Sagiv b.g
            2 hours ago


















          up vote
          1
          down vote













          mapStateToProps will be called when store data changes. It will pass the returned object as new props for the component. This will not affect the component's state. If you'd like to set a new state after the component got its new props you need to use another lifecycle method: static getDerivedStateFromProps (in earlier versions of react componentWillRecieveProps). The object returned by static getDerivedStateFromProps will be your new state.



          https://reactjs.org/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class



          connect() will connect your component to the redux store. Withouth the connect function (of course) your mapStateToProps will not work.




          I'm not sure why react-redux named the API 'mapStateToProps'




          We are talking about the store's state :)






          share|improve this answer























            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














            draft saved

            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53802181%2fi-cant-understand-why-components-with-connect-are-stateful-in-react%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            2 Answers
            2






            active

            oldest

            votes








            2 Answers
            2






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes








            up vote
            6
            down vote



            accepted










            First of all these guidelines are not part of the bible

            you should write code that is easy to reason about for YOU and your TEAM.



            I think you are missing something, A redux Container is different than a react Container.

            I mean, connect will create the container for you, it doesn't mean the wraped component is a Container.



            Basically you can export both versions from the same file, the Container (connected version) and the presentation version (the none connected one).



            Another thing that usually throw people off, is the name of the function and argument of mapStateToProps.

            I prefer the name mapStoreToProps as in




            map the redux store to the component's props.




            the name state can be confusing when we are in the context of react.



            Edit

            As a followup to your comment:




            I totally didn't know these two are actually different. Could you please tell me about more details




            They are different in the way that connect is creating a "Container" for you.



            connect is a High Order Component that creates the Container Component for us with all the subscription logic + functions to pass portions of the store and action-creators to its children as props (mapStateToProps & mapDispatchToProps).



            A "normal" Container is usually refers to a component that you write by hand, its often doesn't deal with how things should look but instead deal with certain logic of the app.



            As for the other comments like




            The connect HoC of react-redux just injects the properties you can request into your component. It returns a new component that is wrapped around your component so that it can update your component whenever the state you're interested in the redux store is modified




            As i mentioned above, this is partially true. It's not just injecting the properties into our component, its subscribing to the store, grabbing it from the Provider (via context) and its doing all these with optimizations in mind, so we won't have to do it by ourselves.




            I'm not sure how mapStateToProps can confuse someone. We are talking about a state management library




            I've seen some devs that misunderstood this because react has a state and redux has a store (at least that's how it was called in most of the tutorials and documentations).

            this can be confusing to some people that are new to either react or redux.



            Edit 2




            It was a bit confusing due to the sentence 'it doesn't mean the wraped component is a Container.' Why is the wrapped component not a container? Isn't a component created by connect also a container?




            I mean that the wrapped component that you wrote doesn't have to be a Container.

            You can connect a "Presentation" component:



            const Link = ({ active, children, onClick }) => {
            if (active) {
            return <span>{children}</span>
            }

            return (
            <a
            href=""
            onClick={e => {
            e.preventDefault()
            onClick()
            }}
            >
            {children}
            </a>
            )
            }

            // ...
            export default connect(mapState, mapDispatch)(Link)





            share|improve this answer























            • Thank you for your answer. But I don't understand this part : 'I think you are missing something, A redux Container is different than a react Container. I mean, connect will create the container for you, it doesn't mean the wraped component is a Container.' Yes, I totally didn't know these two are actually different. Could you please tell me about more details?
              – Rhee
              3 hours ago










            • I'm not sure how mapStateToProps can confuse someone. We are talking about a state management library.
              – Kyle Richardson
              3 hours ago






            • 1




              The connect HoC of react-redux just injects the properties you can request into your component. It returns a new component that is wrapped around your component so that it can update your component whenever the state you're interested in the redux store is modified.
              – Kyle Richardson
              3 hours ago






            • 1




              I've added some more details to answer some of the comments
              – Sagiv b.g
              3 hours ago






            • 1




              @Rhee I've answered you latest comment (Edit 2 section) Hope that's clarify it :)
              – Sagiv b.g
              2 hours ago















            up vote
            6
            down vote



            accepted










            First of all these guidelines are not part of the bible

            you should write code that is easy to reason about for YOU and your TEAM.



            I think you are missing something, A redux Container is different than a react Container.

            I mean, connect will create the container for you, it doesn't mean the wraped component is a Container.



            Basically you can export both versions from the same file, the Container (connected version) and the presentation version (the none connected one).



            Another thing that usually throw people off, is the name of the function and argument of mapStateToProps.

            I prefer the name mapStoreToProps as in




            map the redux store to the component's props.




            the name state can be confusing when we are in the context of react.



            Edit

            As a followup to your comment:




            I totally didn't know these two are actually different. Could you please tell me about more details




            They are different in the way that connect is creating a "Container" for you.



            connect is a High Order Component that creates the Container Component for us with all the subscription logic + functions to pass portions of the store and action-creators to its children as props (mapStateToProps & mapDispatchToProps).



            A "normal" Container is usually refers to a component that you write by hand, its often doesn't deal with how things should look but instead deal with certain logic of the app.



            As for the other comments like




            The connect HoC of react-redux just injects the properties you can request into your component. It returns a new component that is wrapped around your component so that it can update your component whenever the state you're interested in the redux store is modified




            As i mentioned above, this is partially true. It's not just injecting the properties into our component, its subscribing to the store, grabbing it from the Provider (via context) and its doing all these with optimizations in mind, so we won't have to do it by ourselves.




            I'm not sure how mapStateToProps can confuse someone. We are talking about a state management library




            I've seen some devs that misunderstood this because react has a state and redux has a store (at least that's how it was called in most of the tutorials and documentations).

            this can be confusing to some people that are new to either react or redux.



            Edit 2




            It was a bit confusing due to the sentence 'it doesn't mean the wraped component is a Container.' Why is the wrapped component not a container? Isn't a component created by connect also a container?




            I mean that the wrapped component that you wrote doesn't have to be a Container.

            You can connect a "Presentation" component:



            const Link = ({ active, children, onClick }) => {
            if (active) {
            return <span>{children}</span>
            }

            return (
            <a
            href=""
            onClick={e => {
            e.preventDefault()
            onClick()
            }}
            >
            {children}
            </a>
            )
            }

            // ...
            export default connect(mapState, mapDispatch)(Link)





            share|improve this answer























            • Thank you for your answer. But I don't understand this part : 'I think you are missing something, A redux Container is different than a react Container. I mean, connect will create the container for you, it doesn't mean the wraped component is a Container.' Yes, I totally didn't know these two are actually different. Could you please tell me about more details?
              – Rhee
              3 hours ago










            • I'm not sure how mapStateToProps can confuse someone. We are talking about a state management library.
              – Kyle Richardson
              3 hours ago






            • 1




              The connect HoC of react-redux just injects the properties you can request into your component. It returns a new component that is wrapped around your component so that it can update your component whenever the state you're interested in the redux store is modified.
              – Kyle Richardson
              3 hours ago






            • 1




              I've added some more details to answer some of the comments
              – Sagiv b.g
              3 hours ago






            • 1




              @Rhee I've answered you latest comment (Edit 2 section) Hope that's clarify it :)
              – Sagiv b.g
              2 hours ago













            up vote
            6
            down vote



            accepted







            up vote
            6
            down vote



            accepted






            First of all these guidelines are not part of the bible

            you should write code that is easy to reason about for YOU and your TEAM.



            I think you are missing something, A redux Container is different than a react Container.

            I mean, connect will create the container for you, it doesn't mean the wraped component is a Container.



            Basically you can export both versions from the same file, the Container (connected version) and the presentation version (the none connected one).



            Another thing that usually throw people off, is the name of the function and argument of mapStateToProps.

            I prefer the name mapStoreToProps as in




            map the redux store to the component's props.




            the name state can be confusing when we are in the context of react.



            Edit

            As a followup to your comment:




            I totally didn't know these two are actually different. Could you please tell me about more details




            They are different in the way that connect is creating a "Container" for you.



            connect is a High Order Component that creates the Container Component for us with all the subscription logic + functions to pass portions of the store and action-creators to its children as props (mapStateToProps & mapDispatchToProps).



            A "normal" Container is usually refers to a component that you write by hand, its often doesn't deal with how things should look but instead deal with certain logic of the app.



            As for the other comments like




            The connect HoC of react-redux just injects the properties you can request into your component. It returns a new component that is wrapped around your component so that it can update your component whenever the state you're interested in the redux store is modified




            As i mentioned above, this is partially true. It's not just injecting the properties into our component, its subscribing to the store, grabbing it from the Provider (via context) and its doing all these with optimizations in mind, so we won't have to do it by ourselves.




            I'm not sure how mapStateToProps can confuse someone. We are talking about a state management library




            I've seen some devs that misunderstood this because react has a state and redux has a store (at least that's how it was called in most of the tutorials and documentations).

            this can be confusing to some people that are new to either react or redux.



            Edit 2




            It was a bit confusing due to the sentence 'it doesn't mean the wraped component is a Container.' Why is the wrapped component not a container? Isn't a component created by connect also a container?




            I mean that the wrapped component that you wrote doesn't have to be a Container.

            You can connect a "Presentation" component:



            const Link = ({ active, children, onClick }) => {
            if (active) {
            return <span>{children}</span>
            }

            return (
            <a
            href=""
            onClick={e => {
            e.preventDefault()
            onClick()
            }}
            >
            {children}
            </a>
            )
            }

            // ...
            export default connect(mapState, mapDispatch)(Link)





            share|improve this answer














            First of all these guidelines are not part of the bible

            you should write code that is easy to reason about for YOU and your TEAM.



            I think you are missing something, A redux Container is different than a react Container.

            I mean, connect will create the container for you, it doesn't mean the wraped component is a Container.



            Basically you can export both versions from the same file, the Container (connected version) and the presentation version (the none connected one).



            Another thing that usually throw people off, is the name of the function and argument of mapStateToProps.

            I prefer the name mapStoreToProps as in




            map the redux store to the component's props.




            the name state can be confusing when we are in the context of react.



            Edit

            As a followup to your comment:




            I totally didn't know these two are actually different. Could you please tell me about more details




            They are different in the way that connect is creating a "Container" for you.



            connect is a High Order Component that creates the Container Component for us with all the subscription logic + functions to pass portions of the store and action-creators to its children as props (mapStateToProps & mapDispatchToProps).



            A "normal" Container is usually refers to a component that you write by hand, its often doesn't deal with how things should look but instead deal with certain logic of the app.



            As for the other comments like




            The connect HoC of react-redux just injects the properties you can request into your component. It returns a new component that is wrapped around your component so that it can update your component whenever the state you're interested in the redux store is modified




            As i mentioned above, this is partially true. It's not just injecting the properties into our component, its subscribing to the store, grabbing it from the Provider (via context) and its doing all these with optimizations in mind, so we won't have to do it by ourselves.




            I'm not sure how mapStateToProps can confuse someone. We are talking about a state management library




            I've seen some devs that misunderstood this because react has a state and redux has a store (at least that's how it was called in most of the tutorials and documentations).

            this can be confusing to some people that are new to either react or redux.



            Edit 2




            It was a bit confusing due to the sentence 'it doesn't mean the wraped component is a Container.' Why is the wrapped component not a container? Isn't a component created by connect also a container?




            I mean that the wrapped component that you wrote doesn't have to be a Container.

            You can connect a "Presentation" component:



            const Link = ({ active, children, onClick }) => {
            if (active) {
            return <span>{children}</span>
            }

            return (
            <a
            href=""
            onClick={e => {
            e.preventDefault()
            onClick()
            }}
            >
            {children}
            </a>
            )
            }

            // ...
            export default connect(mapState, mapDispatch)(Link)






            share|improve this answer














            share|improve this answer



            share|improve this answer








            edited 2 hours ago

























            answered 3 hours ago









            Sagiv b.g

            15.5k21853




            15.5k21853












            • Thank you for your answer. But I don't understand this part : 'I think you are missing something, A redux Container is different than a react Container. I mean, connect will create the container for you, it doesn't mean the wraped component is a Container.' Yes, I totally didn't know these two are actually different. Could you please tell me about more details?
              – Rhee
              3 hours ago










            • I'm not sure how mapStateToProps can confuse someone. We are talking about a state management library.
              – Kyle Richardson
              3 hours ago






            • 1




              The connect HoC of react-redux just injects the properties you can request into your component. It returns a new component that is wrapped around your component so that it can update your component whenever the state you're interested in the redux store is modified.
              – Kyle Richardson
              3 hours ago






            • 1




              I've added some more details to answer some of the comments
              – Sagiv b.g
              3 hours ago






            • 1




              @Rhee I've answered you latest comment (Edit 2 section) Hope that's clarify it :)
              – Sagiv b.g
              2 hours ago


















            • Thank you for your answer. But I don't understand this part : 'I think you are missing something, A redux Container is different than a react Container. I mean, connect will create the container for you, it doesn't mean the wraped component is a Container.' Yes, I totally didn't know these two are actually different. Could you please tell me about more details?
              – Rhee
              3 hours ago










            • I'm not sure how mapStateToProps can confuse someone. We are talking about a state management library.
              – Kyle Richardson
              3 hours ago






            • 1




              The connect HoC of react-redux just injects the properties you can request into your component. It returns a new component that is wrapped around your component so that it can update your component whenever the state you're interested in the redux store is modified.
              – Kyle Richardson
              3 hours ago






            • 1




              I've added some more details to answer some of the comments
              – Sagiv b.g
              3 hours ago






            • 1




              @Rhee I've answered you latest comment (Edit 2 section) Hope that's clarify it :)
              – Sagiv b.g
              2 hours ago
















            Thank you for your answer. But I don't understand this part : 'I think you are missing something, A redux Container is different than a react Container. I mean, connect will create the container for you, it doesn't mean the wraped component is a Container.' Yes, I totally didn't know these two are actually different. Could you please tell me about more details?
            – Rhee
            3 hours ago




            Thank you for your answer. But I don't understand this part : 'I think you are missing something, A redux Container is different than a react Container. I mean, connect will create the container for you, it doesn't mean the wraped component is a Container.' Yes, I totally didn't know these two are actually different. Could you please tell me about more details?
            – Rhee
            3 hours ago












            I'm not sure how mapStateToProps can confuse someone. We are talking about a state management library.
            – Kyle Richardson
            3 hours ago




            I'm not sure how mapStateToProps can confuse someone. We are talking about a state management library.
            – Kyle Richardson
            3 hours ago




            1




            1




            The connect HoC of react-redux just injects the properties you can request into your component. It returns a new component that is wrapped around your component so that it can update your component whenever the state you're interested in the redux store is modified.
            – Kyle Richardson
            3 hours ago




            The connect HoC of react-redux just injects the properties you can request into your component. It returns a new component that is wrapped around your component so that it can update your component whenever the state you're interested in the redux store is modified.
            – Kyle Richardson
            3 hours ago




            1




            1




            I've added some more details to answer some of the comments
            – Sagiv b.g
            3 hours ago




            I've added some more details to answer some of the comments
            – Sagiv b.g
            3 hours ago




            1




            1




            @Rhee I've answered you latest comment (Edit 2 section) Hope that's clarify it :)
            – Sagiv b.g
            2 hours ago




            @Rhee I've answered you latest comment (Edit 2 section) Hope that's clarify it :)
            – Sagiv b.g
            2 hours ago












            up vote
            1
            down vote













            mapStateToProps will be called when store data changes. It will pass the returned object as new props for the component. This will not affect the component's state. If you'd like to set a new state after the component got its new props you need to use another lifecycle method: static getDerivedStateFromProps (in earlier versions of react componentWillRecieveProps). The object returned by static getDerivedStateFromProps will be your new state.



            https://reactjs.org/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class



            connect() will connect your component to the redux store. Withouth the connect function (of course) your mapStateToProps will not work.




            I'm not sure why react-redux named the API 'mapStateToProps'




            We are talking about the store's state :)






            share|improve this answer



























              up vote
              1
              down vote













              mapStateToProps will be called when store data changes. It will pass the returned object as new props for the component. This will not affect the component's state. If you'd like to set a new state after the component got its new props you need to use another lifecycle method: static getDerivedStateFromProps (in earlier versions of react componentWillRecieveProps). The object returned by static getDerivedStateFromProps will be your new state.



              https://reactjs.org/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class



              connect() will connect your component to the redux store. Withouth the connect function (of course) your mapStateToProps will not work.




              I'm not sure why react-redux named the API 'mapStateToProps'




              We are talking about the store's state :)






              share|improve this answer

























                up vote
                1
                down vote










                up vote
                1
                down vote









                mapStateToProps will be called when store data changes. It will pass the returned object as new props for the component. This will not affect the component's state. If you'd like to set a new state after the component got its new props you need to use another lifecycle method: static getDerivedStateFromProps (in earlier versions of react componentWillRecieveProps). The object returned by static getDerivedStateFromProps will be your new state.



                https://reactjs.org/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class



                connect() will connect your component to the redux store. Withouth the connect function (of course) your mapStateToProps will not work.




                I'm not sure why react-redux named the API 'mapStateToProps'




                We are talking about the store's state :)






                share|improve this answer














                mapStateToProps will be called when store data changes. It will pass the returned object as new props for the component. This will not affect the component's state. If you'd like to set a new state after the component got its new props you need to use another lifecycle method: static getDerivedStateFromProps (in earlier versions of react componentWillRecieveProps). The object returned by static getDerivedStateFromProps will be your new state.



                https://reactjs.org/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class



                connect() will connect your component to the redux store. Withouth the connect function (of course) your mapStateToProps will not work.




                I'm not sure why react-redux named the API 'mapStateToProps'




                We are talking about the store's state :)







                share|improve this answer














                share|improve this answer



                share|improve this answer








                edited 3 hours ago

























                answered 3 hours ago









                messerbill

                2,8301024




                2,8301024






























                    draft saved

                    draft discarded




















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.





                    Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


                    Please pay close attention to the following guidance:


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53802181%2fi-cant-understand-why-components-with-connect-are-stateful-in-react%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    Ellipse (mathématiques)

                    Quarter-circle Tiles

                    Mont Emei