Подключить два действия к одному редуктору? - PullRequest
0 голосов
/ 05 июля 2018

Можно ли подключить два действия к одному редуктору? Что я хочу сделать, это получить объект (который будет иметь те же типы свойств) Из двух разных действий, а затем добавить его в состояние, я хочу, чтобы это было так: Если я вызываю action1, состояние должно быть результатом action1, если я затем вызываю action2, результат action1 в состоянии должен быть перезаписан результатом action2. Поэтому я хочу использовать два действия, связанных с одним редуктором. Поэтому они используют одно и то же свойство в магазине (штат).

Первое действие

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)));
    };
}

2-е действие

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)));
    };
}

Редуктор

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
  }
}

1 Ответ

0 голосов
/ 05 июля 2018

Вы можете подключить одно или несколько действий к редуктору.

// 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})
     }
 }

Теперь в твоем редукторе. 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}
    }
}

Следовательно, действия будут связаны с одним и тем же редуктором.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...