javascript - 将两个 Action 连接到一个 reducer ？

Question

我可以将两个操作连接到一个 reducer 吗？我想要做的是获取一个对象(将具有相同的属性类型)从两个不同的操作然后将其添加到状态中，我希望它是这样的:如果我调用action1，状态应该是action1的结果，如果我然后调用action2，状态中action1的结果应该被action2的结果覆盖。因此，我想使用连接到一个 reducer 的两个操作。因此他们在商店(状态)中使用相同的属性。

第一次行动

export function projectHasErrored(bool){
    return {
        type: 'PROJECT_HAS_ERRORED',
        hasErrored: bool
    };
}

export function projectIsLoading(bool){
    return {
        type: 'PROJECT_IS_LOADING',
        isLoading: bool
    };
}

export function projectFetchDataSuccess(project){
    console.log(project)
    return {
        type: 'PROJECT_FETCH_SUCCESS',
        project
    };
}

export function projectFetchData(url, {owner, projectName}){
    console.log(projectName + "! hejhej")
    return (dispatch) => {
        dispatch(projectIsLoading(true));

        fetch(url,{
            method: 'POST',
            data: {
                owner,
                projectName
            }
            })
            .then((response) => {
                if(!response.ok){
                    throw Error(response.statusText)
                }

                dispatch(projectIsLoading(false));

                return response;
            })
            .then((response) => response.json())
            .then((project) => dispatch(projectFetchDataSuccess(project)))
            .catch(() => dispatch(projectHasErrored(true)));
    };
}

第二个 Action

export function lastProjectHasErrored(bool){
    return {
        type: 'PROJECT_HAS_ERRORED',
        hasErrored: bool
    };
}

export function lastProjectIsLoading(bool){
    return {
        type: 'PROJECT_IS_LOADING',
        isLoading: bool
    };
}

export function projectFetchDataSuccess(project){
    console.log(project)
    return {
        type: 'PROJECT_FETCH_SUCCESS',
        project
    };
}

export function lastProjectFetchData(url, owner){
    return (dispatch) => {
        dispatch(lastProjectIsLoading(true));
        fetch(url,{
            method: 'POST',
            data: {
                owner
            }
            })
            .then((response) => {
                if(!response.ok){
                    throw Error(response.statusText)
                }

                dispatch(lastProjectIsLoading(false));

                return response;
            })
            .then((response) => response.json())
            .then((project) => dispatch(lastProjectFetchDataSuccess(project)))
            .catch(() => dispatch(lastProjectHasErrored(true)));
    };
}

reducer

export function projectHasErrored(state = false, action){
    switch(action.type){
      case 'PROJECT_HAS_ERRORED':
        return action.hasErrored;

      default:
        return state
    }
}

export function projectIsLoading(state = false, action){
  switch(action.type){
    case 'PROJECT_IS_LOADING':
      return action.isLoading;

    default:
      return state
  }
}

export function project(state = [], action){
  switch(action.type){
    case 'PROJECT_FETCH_SUCCESS':
      return action.project;

    default:
      return state
  }
}

Answer 1

您可以将一个或多个操作连接到一个 reducer 。

//action1.js

 `export function Add(data){
      return (dispatch)=>{
          dispatch(type:'SET_DATA',data})   
      } 
  }`

//action2.js

`export function Sub(value){
     return (dispatch)=>{
         dispatch({type:'SET_VALUE',value})
     }
 }

现在在你的reducer.js中

const initialState={
  data:''
  value:''
}
export default function initialReducer(state=initialState,action){
    switch(action.type){
        case 'SET_DATA':{
         return {
              ...state,
              data:action.data
         }
         }
         case 'SET_VALUE':{
         return {
              ...state,
              data:action.value
         }
         }
         default: {return state}
    }
}

因此，这些操作将连接到同一个 reducer 。