为不同的请求获得相同的状态

Question

我有这个动作：

export const connectToServer = (url, config, method) => {
  return (dispatch) => {
    dispatch({type: CONNECTION_START});
    axios({
      method: method,
      url: url,
      data: config
    })
      .then((response) => {
        dispatch({type: CONNECTION_LOADING_SUCCESS, payload: response.data});
      })
      .catch((error) => {
        dispatch({type: CONNECTION_LOADING_ERROR, payload: error.response.data});
      })
  }
};

和 2 个相同的减速器：

const initialState = {
  data: null,
  isLoading: false,
  error: null
};

export const connectToServerReducer = (state = initialState, action) => {
  switch (action.type) {
    case CONNECTION_START :
      return {...state, isLoading: true};
    case CONNECTION_LOADING_SUCCESS :
      return {...state, isLoading: false, data: action.payload, error: null};
    case CONNECTION_LOADING_ERROR:
      return {...state, isLoading: false, data: null, error: action.payload};
    default :
      return state
  }
};

export const differentUrlConnectToServerReducerTest = (state = initialState, action) => {
  switch (action.type) {
    case CONNECTION_START :
      return {...state, isLoading: true};
    case CONNECTION_LOADING_SUCCESS :
      return {...state, isLoading: false, data: action.payload, error: null};
    case CONNECTION_LOADING_ERROR:
      return {...state, isLoading: false, data: null, error: action.payload};
    default :
      return state
  }
};

我的店铺是这样的：

  const rootReducer = combineReducers({
  allUsersData: connectToServerReducer,
  testData: differentUrlConnectToServerReducerTest
});

const configureStore = () => createStore(rootReducer, applyMiddleware(thunk));

export default configureStore

然后我使用 redux hooks 来获取组件中数据的状态

 const allUsersData = useSelector(state => state.allUsersData);
 const testData = useSelector(state => state.testData);
 const dispatch = useDispatch();

终于派出他们了

dispatch(connectToServer(`${BASE_URL}user/allUsersWithPets`, null, 'get'));
dispatch(connectToServer(`${BASE_URL}fakeUrl`, null, 'get'));

我在 allUsersData 中收到了正确的数据，但我也在 testData 中收到了它，但我应该在 testData 中收到一个初始状态（空对象），因为 url是假的

我哪里错了？

Answer 1

你需要将reducers分开，使用不同的初始状态例如：

connectToServer.js
connectToServerTest.js

或者您可以尝试将测试对象添加到 connectToServerReducer 的初始状态。（虽然不是一个好的解决方案）

const initialState = {
  data: null,
  testData: null,
  isLoading: false,
  error: null
};

请记住，数组影响不会分配值，而是分配地址，因此“数据”数组在 connectToServerReducer 和 connectToServerReducerTest 中是相同的数组。

第二个问题，你在两个 reducer 中调用相同的 action 名称，这导致它们不仅共享我告诉你的上一个问题中的相同变量，而且它们还共享分配给它们的相同值。只需将它们更改为：

CONNECTION_TEST_LOADING_SUCCESS
CONNECTION_TEST_LOADING_ERROR
CONNECTION_TEST_START

PS: 而不是使用：

export const connectToServer = (url, config, method) => {
  return (dispatch) => {
   ...
  }
}

使用：

  export const connectToServer = (url, config, method) => (dispatch) => {
       ...
      }

为不同的请求获得相同的状态

get the same state for different requests

redux

redux-thunk

react-redux