разбиение действий и редукторов на разные файлы

Question

Я пытаюсь выполнить вызов API через редуктор. Мой код работает нормально здесь , но проблема во всех действиях, редукторы находятся внутри одного файла. Поэтому я попытался разделить редуктор и действия в другом файле, но он не работает. Я отладил, поставив файл console.log, но он мне не помог. Может кто-нибудь сказать мне, как это исправить? Я предоставляю свой фрагмент кода и песочницу ниже.

https://codesandbox.io/s/redux-async-actions-os6nu

import {
  SELECT_CHANNEL,
  REQUEST_POSTS,
  RECEIVE_POSTS,
  DISPLAY_ALERT
} from "../actions";
//const reducer = (state = {}, action) => {
const fetchReducer = (state = initialState, action) => {

  switch (action.type) {
    case FETCH_DATA_START:
      return {
        ...state,
        fetching: true,
        fetchingMessage: "fetch data start"
      };
    case RECEIVED_DATA:
      return {
        ...state,
        fetching: false,
        fetched: true,
        data: action.payload,
        fetchingMessage: "received data"
      };
    case FETCH_DATA_ERROR:
      return {
        ...state,
        fetching: false,
        error: action.payload,
        fetchingMessage: "fetch data error"
      };

    default:
      return state;
  }
};
export default fetchReducer;

Answer 1

Вам необходимо инициализировать свое состояние в основном файле reducer, а также использовать одно и то же имя действия во всем приложении. Я также использовал mapStateToProps и mapDispatchToProps методы, чтобы упростить использование редукса с реакцией (https://redux.js.org/basics/usage-with-react).

Файл редуктора

import { combineReducers } from "redux";
import { REQUEST_POSTS, RECEIVE_POSTS } from "../actions";

const initialState = {
  fetching: false,
  fetched: false,
  data: [],
  error: null,
  fetchingMessage: ""
};

const fetchReducer = (state = initialState, action) => {
  switch (action.type) {
    case REQUEST_POSTS:
      return {
        ...state,
        fetching: true,
        fetchingMessage: "fetch data start"
      };
    case RECEIVE_POSTS:
      return {
        ...state,
        fetching: false,
        fetched: true,
        data: action.payload,
        fetchingMessage: "received data"
      };
    case "FETCH_DATA_ERROR":
      return {
        ...state,
        fetching: false,
        error: action.payload,
        fetchingMessage: "fetch data error"
      };

    default:
      return state;
  }
};
export default combineReducers({ posts: fetchReducer });

App.js

const mapStateToProps = state => {
 return {
    data: state.posts
 };
};

const mapDispatchToProps = dispatch => {
 return {
  onFetch: () => {
   dispatch(requestPosts);
  },
  onFetchSuccess: data => {
   dispatch(receivedPosts(data));
  }
  // onFetchError: () => {
  //   // dispatch()
  // }
};
};
export default connect(
 mapStateToProps,
 mapDispatchToProps
)(App);

Вот рабочая демонстрационная ссылка, разветвленная из вашего CodeSandbox (https://codesandbox.io/s/redux-async-actions-436qu). Дайте мне знать, если вы это сделаетеничего не понимаю.