目录结构

项目
- src
  - 组件
    - 用户
      - index.js（容器组件）
      - page.js（预设组件）
  - 动作
    - users.js
    - index.js（导出actionCreators组合）
  - 减速器
    - users.js
    - index.js（导出带有combineReducers的减速器组合
  - 常量
    - actionTypes.js
  - 服务
    - users.js
  - index.js
  - store.js
  - 公开
  - index.html

Redux设置

我们在project/src/constants/actionTypes.js中创建常量：

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

我们在project/src/actions/users.js和project/src/actions/index.js中创建actionCreators和import { CREATE_USER } from '../constants/actionTypes'; export default function createUser(user) { type: CREATE_USER, user }：
- users.js
```
import { createUser } from './users';

export default {
    createUser
}
```
- index.js
```
project/src/reducers/users.js
```
我们在project/src/reducers/index.js中创建化径器，并使用combineReducers()在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; } }中合并化径器：
- users.js
```
import users from './users';

export default combineReducers({
    users
})
```
- index.js
```
project/src/store.js
```
我们在import { createStore } from 'redux'; import reducers from './reducers'; export const store = createStore(reducers);中创建商店：
```
<Provider>
```
反应Redux设置
我们将组件应用程序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');中：
```
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);将组件状态转换为属性：
```
HttpOnly
```

那么，问题来了，这个React-Redux循环是否格式正确？什么遗漏或出了什么问题？

Answer 1

是的，文件夹结构运行良好。至于您正在谈论的“获取”或“服务”功能，在一个基本示例中，我将为您提供一个示例，说明动作和缩减器应同时执行的操作。

因此，如果您正在使用要从中“获取”任何东西的后端，则建议在操作中添加该功能，而不是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中的功能很好，但仅应与状态管理有关。您可以想象，如果您在这里开始获取任何数据，代码会变得混乱不堪，更不用说异步问题了。当然，这只是做到这一点的一种方法，但是效果很好。希望这对您有所帮助。

应对Redux生命周期问题

目录结构

Redux设置

反应Redux设置

1 个答案: