redux Reducers和switch语句

mum43rcc 于 2023-05-29 发布在其他

关注(0)|答案(2)|浏览(124)

我对redux有点陌生，我仍然不能完全理解类型和actionCreator的联系。我在自己创建的一个测试类中有以下代码：

import {GET_AGE_APPROPRIATE_OPTIONS, GET_AGE_OPTIONS, GET_BINDING_TYPE_OPTIONS} from "../actions/options-actions"

export default function(state = [], action){
    switch(action.type){
        case GET_AGE_APPROPRIATE_OPTIONS:
            return action.payload.data;
        case GET_AGE_OPTIONS:
            return action.payload.data;
        case GET_BINDING_TYPE_OPTIONS:
            return action.payload.data;
    }
    return state
}

在我的动作创建器中，我有以下代码：

import axios from 'axios';
const ROOT_URL = `http://localhost:8080/`;
const ROOT_OPTIONS_URL = `${ROOT_URL}options`;

export const GET_AGE_OPTIONS = 'GET_AGE_OPTIONS';
export const GET_AGE_APPROPRIATE_OPTIONS = 'GET_AGE_APPROPRIATE_OPTIONS';
export const GET_BINDING_TYPE_OPTIONS = 'GET_BINDING_TYPE_OPTIONS';

export function getAgeOptions() {
    const url = `${ROOT_OPTIONS_URL}/age`;
    const request = axios.get(url);
    return {
        type: GET_AGE_OPTIONS,
        payload: request

    }
}

export function getAgeAppropriateOptions() {
    const url = `${ROOT_OPTIONS_URL}/ageappropriate`;
    const request = axios.get(url);
    return {
        type: GET_AGE_APPROPRIATE_OPTIONS,
        payload: request

    }
}

export function getBindingTypeOptions() {
    const url = `${ROOT_OPTIONS_URL}/bindingtype`;
    const request = axios.get(url);
    return {
        type: GET_BINDING_TYPE_OPTIONS,
        payload: request

    }
}

问题是，当我调用这些函数之一时，它只调用了reducer的case语句的第一部分。我会认为，因为我的actionCreator有不同的类型被传递，它会切换细节。但是仔细想想，我看不出reducer是如何在不同的动作上调用的，因为我是在使用mapDispatchToProps之后直接调用动作的。但是在这个场景中，mapStateToProps都调用了相同的case语句，因此mapStateToProps采用相同的值。那么，当我调用我的动作时，如何让reducer调用我需要的类型呢？我找到的唯一方法是将所有选项分离到单独的reducer文件中，然后在合并reducers中调用reducer case的正确部分。但是它是很多文件，并且必须在我的combineReducers中调用多个文件。我只是想得到的选项，我正在寻找方法来合并它手动。

redux

来源：https://stackoverflow.com/questions/48426439/reducers-and-the-switch-statement

2条答案

按热度按时间

xu3bshqb1#

单个减速器可以具有多个选项。

const defaultState = {
  ageAppropriateOptions: [],
  ageOptions: [],
  bindingTypeOptions: []
};

export default function(state = defaultState, action){
    switch(action.type){
        case GET_AGE_APPROPRIATE_OPTIONS:
            return {
               ...state,
               ageAppropriateOptions: action.payload.data
            };
        case GET_AGE_OPTIONS:
            return {
                ...state,
                ageOptions: action.payload.data
            };
        case GET_BINDING_TYPE_OPTIONS:
            return {
                ...state,
                bindingTypeOptions: action.payload.data
            };
    }
    return state
}

赞(0）回复(0）举报 2023-05-29

2mbi3lxu2#

一个示例，可以帮助编写reducer和thunk中间件来发出get请求。

const {createStore, applyMiddleware} = require('redux');    
const thunk = require('redux-thunk').default;    
const axios = require("axios");    

const REQUEST_STARTED = "REQUEST_STARTED";       
const FETCH_SUCCESS = "FETCH_SUCCESS";    
const FETCH_FAILED = "FETCH_FAILED";    

const initialState = {    
    posts: [],    
    error: '',    
    loading: false    
}    
const fetchPostRequest = () => {    
    return {    
        type: REQUEST_STARTED    
    }    
}    

const fetchPostSuccess = (posts) => {    
    return {    
        type: FETCH_SUCCESS,    
        payload: posts    
    }    
}    

const fetchPostFailed = (error) => {    
    return {    
        type: FETCH_FAILED,    
        payload: error    
    }    
}    

// action to make the request    
    
const fetchPosts = () => {    
    return async dispatch => {    
        try {    
            dispatch(fetchPostRequest());    
            const data = await axios.get('https://jrsonplaceholder.typicode.com/posts');    
            dispatch(fetchPostSuccess(data));    
        } catch (error) {    
            dispatch(fetchPostFailed(error.message));    
        }    
    }    
}    

const postReducer = (state = initialState, action) => {    
    switch (action.type) {    
        case REQUEST_STARTED:    
            return {    
                ...state,    
                loading: true,    

            }    
        case FETCH_SUCCESS:    
            return {    
                ...state,    
                posts: action.payload,    
                loading: false,    

            }    
        case FETCH_FAILED:    
            return {    
                ...state,    
                error: action.payload,    
                loading: false,    

            }    
    }    
}    

const store = createStore(postReducer, applyMiddleware(thunk));    
store.subscribe(() => {    
    const data = store.getState();    
    console.log(data);    
});    

store.dispatch(fetchPosts());

赞(0）回复(0）举报 2023-05-29

我来回答

redux Reducers和switch语句

2条答案

相关问题

热门标签

最新问答