javascript - React Redux 生命周期困惑

Question

我已经阅读了一些有关 React Redux 的文档并观看了视频，但由于它们都是不同的，所以我无法将这些知识应用到一些实际项目中。

我将尝试枚举该过程，以便一起使用 React Redux。

目录结构

• 项目
  • 源代码
    • 组件
      • 用户
        • index.js(容器组件)
        • page.js(演示组件)
    • 行动
      • 用户.js
      • index.js(导出actionCreators组合)
    • reducer
      • 用户.js
      • index.js(导出 reducer 组合 combineReducers
    • 常量
      • actionTypes.js
    • 服务
      • 用户.js
    • index.js
    • store.js
    • 公开
    • index.html

Redux 设置

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 zh project/src/actions/users.js y luego se Combinan en 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 创建 reducer 它们组合在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 设置

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

是的，文件夹结构运行良好。至于您正在谈论的“获取”或“服务”功能，我将给您一个示例，说明在基本示例中操作和 reducer 都应该做什么。

因此，如果您正在使用要从中“获取”任何内容的后端，我建议在操作中添加该功能，而不是在 reducer 中:

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

现在操作关注的是功能，相比之下，reducer 只关注管理 Redux 状态:

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

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

    default:
      return state;
  }
};

reducer 中的功能很好，但它应该只关心管理状态。您可以想象，如果您开始在此处获取任何数据，代码会变得多么困惑，更不用说异步问题了。当然，这只是一种方法，但效果很可靠。希望这对您有所帮助。