對Redux生命周期的混淆

Question

我一直在閱讀關於React Redux的一些文檔和觀看視頻，但是由於它們都不一樣，因此我無法將這些知識應用於某些實際項目。

我將嘗試擴大該過程，以便一起使用React Redux。

目錄結構

• 項目
  • SRC
    • 組件
      • 用戶
        • index.js（容器組件）
        • page.js（Presentational組件）
    • 行動
      • users.js
      • index.js（導出actionCreators組合）
    • 減速機
      • users.js
      • index.js（將reducer與CombineReducers結合使用）
    • 常量
      • actionTypes.js
    • 服務
      • users.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. 我們在project/src/actions/users.js創建actionCreators，並在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/users.js並使用combineReducers()它們合並在project/src/reducers/index.js ：

   • 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創建store：

    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. 我們使用project/src/components/User/index.js mapStateToProps將組件狀態轉換為屬性：

    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：

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;
  }
};

減速器中的功能很好，但僅應與狀態管理有關。 您可以想象，如果您在這里開始獲取任何數據，代碼會變得混亂不堪，更不用說異步問題了。 當然，這只是做到這一點的一種方法，但是效果很好。 希望這對您有所幫助。