Запутался в функции подключения Redux

Question

Я только что перенял унаследованный код, который написан на React и Redux. Я очень озадачен использованием функции connect следующим образом:

export default connect(state => state)(Root); 

Я искал весь код, но не смог найти переменную состояния. App.js следующим образом:

class Root extends Component {
  constructor(props) {
    super(props);    
    this.field = new Field(this);
    this.state = {
      userName: 'Tom'
    }
  }
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch(actions.getUserName({id:1001},(x)=>{console.log(x)}))
  }
  render() {
    const { userName } = this.state;
    const { userData } = this.props;
    return (
      <div>hello {userData} </div>
    );
  }
}
export default connect(state => state)(Root);

Actions.js следующим образом:

export const GET_USER_NAME = ns('GET_USER_NAME');

export function getUserName(arg, callback) {
  return (dispatch) => {
    axiosClient.fetch({
      api: '/getUserNameById',
      data: arg
    }).then((user) => {
        callback(user.name)
        dispatch({
          type: GET_USER_NAME,
          data: user.name
        });
      })
  };
}

Редуктор . js следующим образом:

import * as actions from '../actions/index'
const initialState = {
};
const defaultAction = {
  type: 'doNothing',
};

export default function index(state = initialState, action = defaultAction) {
  switch (action.type) {
    case actions.GET_USER_NAME:
      return { ...state, userData: action.data };
    default:
      return state;
  }
}

Store.js as:

import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
const middlewares = [thunkMiddleware];
const createStoreWithMdware = applyMiddleware(...middlewares)(createStore);
export default createStoreWithMdware;

Answer 1

Подпись от connect равна

const connect = (mapStateToProps, mapDispatchToProps)(Component)

Так что этот странный синтаксис

connect(state => state)(Root)

Это эквивалент

const mapStateToProps = state => state

connect(mapStateToProps, undefined)(Root)

stateза счет прибавки к mapStateToProps. Это снимок состояния вашего магазина. state => state означает: «Сериализировать все мое состояние в Root props».

Обычно мы используем state, чтобы сериализовать только его часть в наши компоненты, что-то вроде этого

const mapStateToProps = state => ({ foo : state.foo })

Answer 2

Функция Redux connect позволяет подключить компонент к прикладному хранилищу Redux. После подключения ваш компонент может получить часть текущего состояния хранилища Redux в качестве реквизита (или всего состояния, как в вашем случае).

В этой строке

export default connect(state => state)(Root);

происходят две вещи.
Первый : первый вызов для подключения принимает функцию в качестве первого аргумента. Эта функция, обычно называемая mapStateToProps, позволяет вам определить, какие свойства хранилища Redux вам нужно сделать доступными для вашего компонента, и под каким именем. В вашем случае ваша функция возвращает все хранилище, как есть, поэтому ваш компонент будет иметь в своих свойствах все свойства хранилища.
Second : второй вызов, это то, что обычно называетсяHOC (High Order Component), функция, которая возвращает React Component. Его аргумент - это компонент, который нужно подключить. Этот компонент будет упакован и получит реквизиты, указанные в первом вызове функции.

const addSomePropsFromReduxStoreTo = connect(state => state)
const connectedRoot = addSomePropsFromReduxStoreTo(Root)

Redux также добавит специальный дополнительный реквизит dispatch, который позволит вам отправить действие и через него обновить состояние хранилища Redux. Вот почему в вашем методе Root componentDidMount вы можете сделать:

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch(actions.getUserName({id:1001},(x)=>{console.log(x)}))
  }

Если вам интересно, где находится состояние, оно определяется в вашем файле Store.js (с помощью функции createStore). В корневом компоненте вашего приложения (обычно App.js) у вас должен быть специальный компонент, называемый Provider , который принимает магазин как опору. Благодаря этому специальному компоненту, находящемуся в корне вашего приложения, каждый компонент-потомок может самостоятельно подключаться и получать доступ к магазину.

Answer 3

connect - это компонент более высокого порядка, который принимает два параметра mapStateToProps и mapDispatchToProps, где mapStateToProps делает доступными значения резервных хранилищ в качестве реквизитов для компонента, а mapDispatchToProps делает редукционные действия доступными в качестве реквизитов для компонента.

Здесь connect(state => state) означает, что все ключи хранилища резервов сопоставлены с реквизитами компонента. Итак, скажем, если ваш магазин приставок выглядит так:

{
  home: { count: 1 },
  login: { isLoggedIn: true }
}

затем,

при выполнении connect(state => state), реквизиты компонента будут,

{
  ...originalProps,
  home: { count: 1 },
  login: { isLoggedIn: true }
}

Если вы хотите использовать только isLoggedIn в своем компоненте, вы можете сопоставить его только с реквизитами:

connect( state =>({
  isLoggedIn: state.login.isLoggedIn
}))