Вот как я организовывал свои проекты React / Redux, потому что они делали это в учебнике, которому я следовал.Это архитектура Flux, и если нет, то как бы вы ее назвали?
- Сначала я вызываю функцию в моем компоненте, которая определена в файле действий
- Эта функция выполняет запрос ajaxчтобы получить информацию из API
- Затем он запускает создателя действия
- Редуктор прослушивает создателей действия и, как только один из них обнаружен, выполняет функцию, которая обновляет состояние
Вот пример:
Компонент
class List extends React.Component {
componentDidMount() {
this.props.getPosts();
}
// etc...
}
const mapStateToProps = state => {
return {
posts: state.posts
};
};
const mapDispatchToProps = dispatch => {
return {
getPosts: () => dispatch(actions.getPosts())
};
};
export default connect(mapStateToProps, mapDispatchToProps)(List);
Действие
const postsLoaded = posts => {
return {
type: actionTypes.POSTS_LOADED,
posts: posts
};
};
export const getPosts = () => {
return dispatch => {
axios
.get('http://api.something.com/posts', {})
.then(response => {
dispatch(postsLoaded(response.posts));
})
.catch(e => {
console.error(e);
});
};
};
Редуктор
const setPosts = (prevState, action) => {
return {
...prevState,
...action.posts
};
};
const reducer = (prevState = {}, action) => {
switch (action.type) {
case actionTypes.POSTS_LOADED:
return setPosts(prevState, action);
default:
return prevState;
}
};
export default reducer;