search

heron2014 / react-todo

0 stars 0 forks source link

react-redux #2

Open heron2014 opened 8 years ago

heron2014 commented 8 years ago

Watch this video: https://www.youtube.com/watch?v=VJ38wSFbM3A

Connects components to redux store

heron2014 commented 8 years ago 
module.exports = connect(
  (state) => {
    return {
      todos: state.todos
    };
  }
)(TodoList);

connect() returns a brand new React component, it doesn't alter the component passed in. The newly created component injects the state/actions into your component (the one passed into the function returned from connect()).

On the first call we're simply providing a set of functions that will be used in the new component to determine what state/actions we'd like to use. On the second call we're getting back that new react component that's using the function we previously passed in. Those functions are used internally to properly render our component.

Arguments passed directly to connect have access to redux state in a component. With connect, the component gets passed as an argument to the function that gets returned from connect.