如何将 MySQL 的响应添加到 Redux？答案

【问题标题】：How to add response from MySQL to Redux?如何将 MySQL 的响应添加到 Redux？
【发布时间】：2020-05-13 11:26:19
【问题描述】：

我看过很多关于 YT 的教程，也读过一些关于 redux 和获取响应的文章，但我仍然不知道该怎么做。我的应用程序正在 React 中开发。老实说，在编写代码的过程中，我什至不知道自己在做什么，但我试图通过开发这个应用程序来了解 Redux 的工作原理。我不是 natvie，所以英语很抱歉。

这是我的代码，也许有人可以帮助我。

types.js

export const FETCH_EMPTY_ROOMS = 'FETCH_EMPTY_ROOMS';

index.js

import { combineReducers } from 'redux'
import { roomsReducer } from '../Reducers/reducers';

const rootReducer = combineReducers({
    rooms: roomsReducer
})

export default rootReducer

reducers.js

import { 
  FETCH_EMPTY_ROOMS 
} from "../Actions/types"

const INITIAL_STATE = {
  emptyRooms: []
};

export const roomsReducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case FETCH_EMPTY_ROOMS:
      return {
        ...state,
        emptyRooms: action.payload
      };

    default:
      return state;
  }
}

actions.js

import { 
    FETCH_EMPTY_ROOMS
} from './types'

export const getEmptyRooms = () => dispatch => {
    return fetch('http://localhost:5000/rooms/empty_rooms')
        .then(res => res.json())
        .then(rooms =>
            dispatch({
              type: FETCH_EMPTY_ROOMS,
              payload: rooms
            })
        )
        .catch(error => {
            console.error(error)
        })
}

store.js

import { createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from 'redux-devtools-extension'
import rootReducer from './Reducers/index'
import thunk from 'redux-thunk';

const store = createStore(rootReducer, composeWithDevTools( applyMiddleware(thunk) ))

export default store;

App.js

import React, { useEffect, useState } from 'react';
import MainTemplate from '../Templates/mainTemplate'
import Navbar from '../Components/Organism/navbar'
import Home from './home';
import Chat from './chat';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import { connect } from 'react-redux';
import { getEmptyRooms } from '../Redux/Actions/actions'


const App = ({rooms}) => {
  useEffect(() => {
      getEmptyRooms();
      console.log(rooms)
  }, [])


  return (
      <MainTemplate>
        <Router>  
          <Navbar />
          <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path={"/chatroom"} component={Chat} />
          </Switch>
        </Router> 
      </MainTemplate>
  );
}

const mapStateToProps = state => ({
  rooms: state.rooms.emptyRooms
});


export default connect(mapStateToProps, {})(App);

非常感谢您的帮助。

【问题讨论】：

标签： mysql reactjs redux react-redux fetch

【解决方案1】：

Redux 将帮助您在多个组件之间共享一个公共范围。如果你想在 redux 中使用 Promise，你应该查看 Redux Thunk，例如这将帮助你在 Redux 中管理 Promise。

另一种解决方案是在组件中管理您的请求。

【讨论】：