Question

我是react和redux的新手，我想知道是否可以使用一个商店进行多项操作。

我正在尝试这个但是第一个动作用最后一个动作覆盖了，为什么？

我在两个单独的组件中调用该操作，并在我的app组件中调用这两个组件。

reducer.js

const dataReducer = (state = {
  fetching: false,
  fetched: false,
  data: {},
  error: null
}, action) => {
  switch (action.type) {
    case 'FETCH_DATA_PENDING':
      return {...state, fetching: true}
      break;
    case 'FETCH_DATA_FULFILLED':
      return {...state, fetching: false, fetched: true, data: action.payload.data }
      break;
    case 'FETCH_DATA_REJECTED':
      return {...state, fetching: false, error: action.payload }
      break;
  }
  return state;
}

module.exports = dataReducer;

action.js

import axios from 'axios';

const apiUrl = 'https://swapi.co/api/';

//fetch categories
export function fetchCategories() {
  return {
    type: 'FETCH_DATA',
    payload: axios.get(apiUrl)
  }
}

//fetch films
export function fetchFilms() {
  return {
    type: 'FETCH_DATA',
    payload: axios.get(apiUrl + 'films')
  }
}

Answer 1

你应该能够这样做，但是你的两个动作具有相同类型的事实可能会让你的减速器混乱。类型FETCH_FILMS和FETCH_CATEGORIES可能更有帮助。这样，reducer可以与它们分开，除非你总是希望每个 reducer与它们做同样的事情。

redux rejactjs使用一个商店进行多个操作

1 个答案: