Зачем Redux нужно два раза отправить

Question

Вот мой App.js

class Root extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data:''
    }
  }
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch(actions.getTable((data) => {
          console.log(data)
    }));
  }
}

Тогда вот мой action.js:

export function getTable(callback) {
  return (dispatch) => {
    axios.get({
      api: 'localhost/test',
    })
      .then((list) => {
        callback(list.data)
        dispatch({
          type: RECEIVE_TABLE_DATA,
          data: list.data,
        });
      })
  };
}

Как я понимаю, данные уже были отправлены Редуктору в действии.js, например:

dispatch({
  type: RECEIVE_TABLE_DATA,
  data: list.data,
});

, почему данные снова отправлялись в App.js, например:

dispatch(actions.getTable((data) => {
      console.log(data)
}));

Answer 1

Судя по вашему коду, я предполагаю, что вы используете redux-thunk. С redux-thunk вы можете использовать thunk - функцию, которая может отправлять другие действия, что полезно при работе с асинхронными действиями. Thunk также может быть отправлен как обычное действие.

Например, в вашем коде getTable является создателем действия, который возвращает thunk. Вот почему он может отправлять действие RECEIVE_TABLE_DATA. Обратите внимание, что он может отправлять другое действие, например, FETCH_TABLE_DATA перед вызовом axios.

Таким образом, этот код

dispatch(actions.getTable((data) => {
    console.log(data)
}));

отправляет поток. Данные не отправляются снова.

Если вы удалите

dispatch({
  type: RECEIVE_TABLE_DATA,
  data: list.data,
});

из функции getTable, данные вообще не будут отправлены.

IРекомендуем прочитать документацию https://github.com/reduxjs/redux-thunk или пример асинхронной синхронизации из документа redux doc. В этом файле, например, https://github.com/reduxjs/redux/blob/master/examples/async/src/actions/index.js вы можете увидеть разницу между создателем обычных действий, таким как requestPosts или receivePosts, и создателем громовых действий, таким как fetchPosts. Надеюсь, это поможет :)