Реагировать на путаницу Redux в жизненном цикле

Question

Я читал несколько документов и смотрел видео, касающиеся React Redux, но, поскольку все они разные, я не смог применить эти знания в каком-то реальном проекте.

Я постараюсь изумить процессчтобы использовать React Redux вместе.

Структурирование каталогов

• проект
  • src
    • компоненты
      • Пользователь
        • index.js (компонент контейнера)
        • page.js (компонент представления)
    • действия
      • пользователей.js
      • index.js (экспорт комбинации actionCreators)
    • редукторы
      • users.js
      • index.js (экспорт комбинации редукторов)с combReducers
    • констант
      • actionTypes.js
    • services
      • пользователей.js
    • index.js
    • store.js
    • public
    • index.html

Redux Setup

1. Мы создаем константы в project/src/constants/actionTypes.js:

   export const CREATE_USER = 'CREATE_USER';
   export const DELETE_USER = 'DELETE_USER';
   export const UPDATE_USER = 'UPDATE_USER';
   

2. Мы создаем actionCreators en project/src/actions/users.js y luego secombinan ru project/src/actions/index.js:

   • users.js

   import { CREATE_USER } from '../constants/actionTypes';
   
   export default function createUser(user) {
       type: CREATE_USER,
       user
   }
   

   • index.js

   import { createUser } from './users';
   
   export default {
       createUser
   }
   

3. Мы создаем редукторы в project/src/reducers/users.js, и они объединяются в project/src/reducers/index.js с использованием combineReducers():

   • users.js

   import { CREATE_USER, UPDATE_USER, DELETE_USER } from '../constants/actionTypes';
   import { createUser } from '../services/users';
   
   const initialState = {
       name: '',
       password: '',
       email: ''
   }
   
   export default function users(state = initialState, action) {
       switch (action.type) {
           case CREATE_USER:
               state = createUser(action.user);
               return state;
       }
   }
   

   • index.js

   import users from './users';
   
   export default combineReducers({
       users
   })
   

4. Создаем магазин в project/src/store.js:

   import { createStore } from 'redux';
   import reducers from './reducers';
   
   export const store = createStore(reducers);
   

   React Redux Setup

5. Оборачиваем приложение компонента <Provider> в project/src/index.js:

   import React from 'react';
   import ReactDOM from 'react-dom';
   import { Provider } from 'react-redux';
   import { store } from './store';
   
   const Root = () => (
       `
           <Provider store={store}>
               <App />
           </Provider>
       `
   )
   
   ReactDOM.render(Root, document.getElementById('root');
   

6. Мы преобразуем состояние компонента в свойства с помощью mapStateToProps in project/src/components/User/index.js:

   import React, { Component } from 'react';
   import { createUser } from '../../actions/users';
   import Page from './page';
   
   class User extends Component {
       render() {
           return <Page users={this.props.users} />
       }
   }
   
   const mapStateToProps = state => ({
       users: this.props.users
       // what is mapped here?
   });
   
   const mapDispatchToProops = dispatch => ({
       // what about here?
   });
   
   export default connect(mapStateToProps, mapDispatchToProps)(User);
   

   ---

Итак, вопрос в том, хорошо ли сформирован этот цикл React-Redux?Что отсутствует или не так?

Answer 1

Да, структура папок работает хорошо. Что касается функциональности «выборка» или «служба», о которой вы говорите, я приведу вам пример того, что должны делать действия и редукторы в базовом примере.

Так что, если вы работаете с бэкэндом, из которого вы «извлекаете» что-либо, я бы рекомендовал добавить эту функциональность в действие, а не редуктор:

import { USERS_FETCHED } from '../constants/actionTypes';
import { baseUrl } from "../constants/baseUrl";

const usersFetched = users => ( { // action to dispatch
  type: USERS_FETCHED,
  users,
} );

export const fetchUsers = () => ( dispatch ) => { // export for mapDispatchToProps
  request( `${ baseUrl }/users` )
    .then( response => {
      dispatch( usersFetched( response.body ) ); // dispatch the action to reducer
    } )
    .catch( console.error );
}; // in your case you import createUser(), but it works either way

Теперь действие касается функциональности, в отличие от редуктора, касающегося только управления состоянием Redux:

import { USERS_FETCHED } from "../constants/actionTypes";

export default ( state = null, action = {} ) => {
  switch ( action.type ) {
    case USERS_FETCHED:
      return action.users;

    default:
      return state;
  }
};

Функциональность редуктора в порядке, но она должна касаться только управления состоянием. Вы можете себе представить, насколько беспорядочным может быть код, если вы начнете получать какие-либо данные здесь, не говоря уже о проблемах с асинхронностью. Конечно, это всего лишь один из способов сделать это, но он работает надежно. Надеюсь, это вам как-то поможет.