Как реализовать `thunk` в` redux` с правильным способом обработки асинхронной функции?

Вот мой магазин, реализованный thunk:

store/index.js

import { createStore, applyMiddleware } from "redux";
import reducer from "../reducers/";
import thunk from "redux-thunk";

const store = createStore(reducer, applyMiddleware(thunk));
export default store;

вот мое действие:

actions/index:

export const remove = function(id) {
  return {
    type: "remove",
    payload: setTimeout(function() {
      return id;
    }, 2000)
  };
};

export const add = function() {};

export default { remove, add };

вот моя функция отправки:

component/Item.js

import React from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { remove } from "../actions/";

const Item = props => {
  function removeTrigger() {
    props.remove(props.item.id);
  }
  return (
    <li>
      {props.item.name} <button onClick={removeTrigger}>Delete</button>
    </li>
  );
};

function mapAction(dispatch) {
  return bindActionCreators({ remove }, dispatch);
}

export default connect(
  null,
  mapAction
)(Item);

при нажатии на кнопку delete я получаю консольное сообщение. Но id не удаляется. Кто-нибудь поможет мне правильно реализовать здесь преимущество thunk?

Живая демонстрация

0
0
310
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

     export const remove = function(id){
         return function(dispatch){
             let id = null
             setTimeout(()=> {
                id = 1
                dispatch({type: 'remove', payload:id})
             }, 3000)
         }
    }

Вы также можете получить дополнительный аргумент рядом с dispatch, функцией getState, которая позволяет вам получить доступ к глобальному состоянию.

Не могли бы вы обновить мою демонстрацию как образец, я не могу правильно понять

3gwebtrain 13.09.2018 19:06

Ваша функция remove - это то, что мы называем actionCreator, это именно то, что: функция, которая возвращает действие (объект со свойством type) редуктору. Весь код, передаваемый редуктору по определению, ДОЛЖЕН быть синхронным. В вашем случае вы возвращаете асинхронный код редуктору в payload. Это происходит, потому что thunk будет действовать только тогда, когда ваш создатель действия вернет function вместо объекта, а внутри этой функции после завершения асинхронного кода вы dispatch объект

Dupocas 13.09.2018 19:13

Другие вопросы по теме