使用Redux-promise调用API时，Redux State未更新

Question

目前我正在花时间学习React和Redux，一般来说，我对编码是新手。不幸的是，我陷入了困境。

所以我可以发送一条消息，当我手动调用api时，消息就会显示出来。此外，redux记录器显示了包含内容的消息数组。但它似乎不会将消息保存到该州。这意味着当我重新加载页面时(因为我还没有实现自动重新加载(。它将只显示输入和按钮标签。对于消息，它从initialState获取信息，initialState为空。

action/index.js

const BASE_URL = '********************';
const FETCH_MESSAGES = 'FETCH_MESSAGES';
const SEND_MESSAGE = 'SEND_MESSAGE';
export function fetchMessages(channel) {
const url = `${BASE_URL}${channel}/messages`;
const promise = fetch(url).then(reason => reason.json());
return {
type: FETCH_MESSAGES,
payload: promise
};
}
export function createMessage(channel, author, content) {
const body = { channel, author, content };
const url = `${BASE_URL}${channel}/messages`;
const promise = fetch(url, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(body)
}).then(reason => reason.json());
return {
type: SEND_MESSAGE,
payload: promise
};
}

index.jsx

// external modules
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import logger from 'redux-logger';
import reduxPromise from 'redux-promise';
// internal modules
import App from './components/app';
import '../assets/stylesheets/application.scss';
// Reducer
import messagesReducer from './reducers/messages_reducer';
import selectedChannelReducer from './reducers/selected_channel_reducer';
const identityReducer = (state = null) => state;
const initialState = {
messages: [],
channels: ['general', 'react', 'berlin'],
currentUser: prompt("What is your username?") || `anonymous${Math.floor(10 + (Math.random() * 90))}`,
selectedChannel: 'react'
};
// State and reducers
const reducers = combineReducers({
messages: messagesReducer,
channels: identityReducer,
currentUser: identityReducer,
selectedChannel: selectedChannelReducer
});
const middleWares = applyMiddleware(logger, reduxPromise);
// render an instance of the component in the DOM
ReactDOM.render(
<Provider store={createStore(reducers, initialState, middleWares)}>
<App />
</Provider>,
document.getElementById('root')
);

reducers/messagesreducer.js

import { FETCH_MESSAGES, SEND_MESSAGE } from '../actions';
export default function(state = null, action) {
switch (action.type) {
case FETCH_MESSAGES: {
return action.payload.messages;
}
case SEND_MESSAGE: {
const copiedState = state.slice(0);
copiedState.push(action.payload);
return copiedState;
}
default:
return state;
}
}

Answer 1

您的reduced应该如下所示，因为您需要在更新旧状态后返回新状态。

import { FETCH_MESSAGES, SEND_MESSAGE } from '../actions';
export default function(state = null, action) {
switch (action.type) {
case FETCH_MESSAGES: {
const newState = {...state};
newState.messages = action.payload.messages;
return newState;
}
case SEND_MESSAGE: {
const newState = {...state};
const copiedState = state.slice(0);
newState.copiedState = [];
newState.copiedState.push(action.payload);
return newState;
}
default:
return state;
}
}