React Redux connect metodu

Giriş
Redux ve Redux Form için açıklama burada. Açıklaması şöyle

... we don’t have access to our store directly inside the component. For this, we need to connect our component with the Store by importing connect from react-redux.
...
connect is a method which returns a function which then takes a component as an input. So, in short, it’s a function that returns a higher order component, and, since connect is a function, we can pass the argument as the configuration for the component.

Basically, we pass two arguments:
- The exact state we want.
- The action we want to dispatch.

Aslında toplam 4 tane parametre alıyor ancak en çok 3 tanesi kullanılıyor.

1. mapState Parametresi
Açıklaması şöyle. Store'daki veriyi kendi props nesneme atamak içindir.

The use of mapStateToProps in your connect() call means you want your component to be notified when the store changes

Açıklaması şöyle.

If a mapStateToProps function is specified, the new wrapper component will subscribe to Redux store updates. This means that any time the store is updated, mapStateToProps will be called. The results of mapStateToProps must be a plain object, which will be merged into the wrapped component’s props. If you don't want to subscribe to store updates, pass null or undefined in place of mapStateToProps.

2. mapDispatch Parametresi
Ekrandaki bilgiyi Store'a aktarmak içindir. Açıklaması şöyle.

Conventionally called mapDispatchToProps, this second parameter to connect() may either be an object, a function, or not supplied.Your component will receive dispatch by default.

3. Component
Açıklaması şöyle.

App is the current component name, if your component name is Mycomp then you can bind with Mycomp if it's a class component. If it is a functional component this could be the const name to which your component s assigned to.

connect metodu aslında yeni bir metod döner. Bu yeni dönen metoda Component parametre olarak geçiliyor. Mantık olarak şuna benzer. Burada adder'a y parametresi yani 4 geçiliyor. Redux'ta da connect()'in döndüğü metoda Component geçiliyor.

function makeAdder(x) {
  function adder(y) {
    return x + y;
  }
  // return the inner `adder` function from the `makeAdder` function
  return adder;
}

console.log(makeAdder(5)(4)); // prints 9

connect metodu - mapState + mapDispatch + Component
mapState Redux Store'daki bilgiyi props'a aktarır.
mapDispatch ise bileşendeki bilgiyi Redux Store'a aktarır.
Component is render işlemini yapar. İstenirse Component yerine sadece bir metod da kullanılabilir.

Örnek
Şöyle yaparız. Burada App Component parametresidir.

class App extends Component {
  render() {
    return (
      ...
      <ProtectedRoute path="/support" isAuthenticated={this.props.isAuthenticated}  />
      ...
    );
  }
}
const mapStateToProps = state => {
  return {
    isAuthenticated: state.auth.isAuthenticated // true or false
  };
};
export default connect(
  mapStateToProps,
  { checkLoggedIn }
)(App);

Örnek
Elimizde şöyle bir kod olsun.

import React, { Component } from "react";

import { connect } from "react-redux";

class Settings extends Component {
  state = { name: this.props.settings.name };

  render() {
    return (
      <div>
        <h1>Settings</h1>
        <p>This is Settings page</p>
        My name is{" "}
        <input
          value={this.state.name}
          onChange={e => this.setState({ name: e.target.value })}/>
        <button onClick={e => this.props.changeName(this.state.name)}>
          Change
        </button>
      </div>
    );
  }
}

Şöyle yaparız. Burada Settings Component parametresidir.

const mapState = state => ({ settings: state.settings });
const mapDispatch = dispatch => {
    changeName(name) {
      dispatch({ type: "setName", name });
    }
};

export default connect(
  mapState,
  mapDispatch
)(Settings);