Фильтровать данные в создателях действия Redux?

Question

Я пытаюсь решить, где внутри приложения React/Redux фильтровать данные JSON, которые я получаю с помощью axios.get(). В основном я хочу, чтобы иметь возможность выбирать, какой «вид» данных, которые я хочу, и фильтровать через данные на основе этого выбора.

Должно ли это быть сделано внутри создателя действия? Пример:

export function fetchData() { 
    axios.get(DATA_URL) 
    .then(res => { 
     // logic to filter only most recent 7 pieces of data 
    }); 
} 

Если да, должен ли я иметь создателя действия для каждого разного вида? Еще немного нового для React/Redux. Любая помощь может быть оценена. В основном я пытаюсь изменить текущее свойство данных о состоянии, а затем передать, что вниз в атрибут data внутри компонента визуализации данных, как например:

<LineChart data={this.state.data} /> 

Answer 1

Там, кажется, 2 места, чтобы сделать это.

Первое место - ваш создатель действия асинхронного действия, когда вы получаете ответ, вы можете отфильтровать данные ответа и передать его функции вашего создателя действия успеха, чтобы он передавал отфильтрованные данные в редуктор. Наконец, ваше состояние будет изменено с помощью фильтрованных данных.

Второе место - ваш редуктор. Вы можете фильтровать action.data в своем редукторе. Там нет ничего плохого. Отфильтруйте данные, верните новое состояние с отфильтрованными данными. Лично я бы сделал это в редукторе. Так что создатели действия просто передают ответ, тогда я могу отлаживать его в редукторе. Оба пути возможны.

Пример:

Вы хотите получать данные от GitHub, чтобы показать пользователям:

/* 
    CONSTANTS # just variables to refer in your actions or reducer 
    you want to change your state for 3 different points 
    1- Request started 
    2- Request ended with success, you have the data you requested 
    3- Request ended with failure, you have error message as response 
*/ 
let 
    GET_GITHUB_INFO = 'GET_GITHUB_INFO', // for request started 
    GET_GITHUB_INFO_SUCCESS = 'GET_GITHUB_INFO_SUCCESS', // for request success 
    GET_GITHUB_INFO_FAIL = 'GET_GITHUB_INFO_FAIL' ; // for request fail 

/* 
    REDUCER # the function called in Redux createStore when you 
      # dispatch action (look at the source code for createStore) 
*/ 

let reducer = (state, action) => { 
    case GET_GITHUB_INFO : // when you dispatch action to start request 
    return { 
    loading : true, /* # we changed our redux state to let components know 
         # request started. Component can show spinner etc. */ 
    loaded : false, /* # change loaded state if it has changed before, for 
         # for instance think about a second request */ 
    error : false /* # change error state if it has changed before, just 
         # like loaded case above */ 
    }; 
    case GET_GITHUB_INFO_SUCCESS : /* # you dont manually dispatch action for this 
            # from component, instead you write the code 
            # which dispatches action for this in your 
            # async action creator function. more on this 
            # later */ 
    return { 
    loading : false, /* # we changed our redux state to let components know 
         # request ended. Component can hide spinner etc. */ 
    loaded : true, /* # change loaded state because we have no error, we got 
         # success from our promise, more on that later */ 
    error : false /* # no error */ 
    } 

} 

// actions 

export function getGithubInfo() { 
    return { 
    type : GET_GITHUB_INFO 
    } 
}; 
export function getGithubInfoSuccess(data) { 
    return { 
    type : GET_GITHUB_INFO_SUCCESS, 
    data 
    } 
}; 
export function getGithubInfoFail(data) { 
    return { 
    type : GET_GITHUB_INFO_FAIL, 
    data 
    } 
}; 
export function getGithubInfoAsync({view,id}){ 
    // you ll only call this action from your component 
    return function(dispatch) { 

    dispatch(getGithubInfo()); 

    axios.get(DATA_URL) 
    .then((response) => { 
     /* filter your response and pass to action creator function */ 
     dispatch(getGithubInfoSuccess(response.data)); // { type :"",views : ...} 
    }) 
    .catch((error) => { 
     return dispatch(getGithubInfoFail({ 
     error : error['error_message'] 
     })) 
    }); 
    } 
}