CODEWITHSUNDEEP
javascriptreactjsredux
Gambit2007
Gambit2007

Reputation: 3958

Need some clarifications on some basic setup

After watching a few Redux tutorials I still have a few questions:

  1. After creating my store, i have:

    ReactDOM.render(, document.getElementById('root'));

    Going into the App component, I define:

    function mapStateToProps(state) {
    return {
        posts: state.posts,
        comments: state.comments 
    }
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators(actions, dispatch)
}

    Where do state and dispatch come from? Is this automatically referring to the store's state and dispatch since i connected it to my component?

  2. One of my React components has a form which on submit, calls a function:

    handleSubmit(event) { ... }

    So in the constructor of that component, I have:

    constructor() {
    super()
    this.handleSubmit = this.handleSubmit.bind(this);
}

    Is calling super() always necessary when declaring a React class component? Why do I need to do this type of binding there?

  3. After submitting that form, I dispatch an action called addPost. How does it "go" to the reducer? Is it just because the reducer was given when I created the store and using mapDispatchToProps(dispatch) I "let" Redux know which actions could be dispatched to that reducer?

  4. The reducer simply returns a state object. Where is the logic that actually "saves" that state into the store? Is it hidden?

Upvotes: 1

Views: 70

Answers (3)

brietsparks
brietsparks

Reputation: 5016

  1. Yes, treat state and dispatch as references to your redux state and the dispatch function respectively.

  2. React docs say:

    If you don’t initialize state and you don’t bind methods, you don’t need to implement a constructor for your React component.

Try an arrow function for your handler:

class MyComponent extends Component {
    handleSubmit = () => {
        // ...
    }
}

  1. The reducer was given to the store, the store was given to the react-redux <Provider> component, and the Provider component provides a React context where dispatched actions in descendant components get picked up by said reducers.

  2. That logic is in the redux library.

Upvotes: 3

Daniel
Daniel

Reputation: 15413

Where do state and dispatch come from? Is this automatically referring to the store's state and dispatch since i connected it to my component?

State is one of the hardest to understand topics and comes in front and center when we start concentrating on Redux. Each class-based component that we define has its own state object.

mapStateToProps is our ability to interface from the application level state down to the component level. Its where we sort of pluck properties off our state object and inject them into our components.

dispatch is how you change the state in your application, you dispatch an action.

In your implementation, you are using bindActionCreators, which turns an object whose values are action creators, into an object with the same keys, but with every action creator wrapped into a dispatch call so they may be invoked directly.

I personally have not ever connected redux actions this way, so I had to look this one up.

Is calling super() always necessary when declaring a React class component? Why do i need to do this type of binding there?

Yes, React components always have to call super in their constructors to be set up properly.

For an in-depth explanation of this kind of binding trickery, begin with the React docs. If you are not so inclined, just know that in React, whenever you define an event handler that uses this, you need to add this.methodName = this.methodName.bind(this) to your constructor function.

Upvotes: 0

markerikson
markerikson

Reputation: 67469

  1. Please check out our new official React-Redux docs . Specifically, you should read through connect: Extracting Data with mapStateToProps and connect: Dispatching Actions with mapDispatchToProps.

  2. If you define a constructor for a class, and it extends another class, then yes, you need to call super() as the first line of the constructor - that's how ES6 classes are defined to work.

  3. Redux only has a single reducer function. The insides of dispatch() look like this:

    function dispatch(action) {
    newState = rootReducerFunction(oldState, action);
    subscriberCallbacks.forEach(callback => callback() );
}

You might want to read through the Structuring Reducers page in the Redux docs to get a better understanding of how and why reducers are normally split into smaller functions.

  1. In most cases, the logic that combines the different "state slices" back together is in combineReducers(), because you used it to generate the "root reducer" function.

Upvotes: 3

Related Questions