在分页的laravel-api中更新redux状态

Question

大家好。我在一个项目中遇到了这个问题。我有一个返回分页数据的laravel API。结构类似于

{
"current_page": 4,
"data": [
{
"id": 8,
"name": "Gage Gulgowski",
"anonymous": true,
"message": "Tempora amet id porro saepe totam consequatur. Qui porro dolorum aspernatur rerum inventore ipsum et. Soluta
ducimus quia nostrum ea.",
"created_at": "2020-11-29T20:56:49.000000Z",
"updated_at": "2020-11-29T20:56:49.000000Z",
"votes": 4,
"info": "illum"
},
{
"id": 7,
"name": "Jessy Rosenbaum PhD",
"anonymous": true,
"message": "Aspernatur optio sint voluptatum iure. Nesciunt aliquam magnam ducimus aperiam error laborum molestiae odit.
Facere tempore aliquid ut occaecati quo fugiat.",
"created_at": "2020-11-29T20:56:49.000000Z",
"updated_at": "2020-11-29T20:56:49.000000Z",
"votes": 8,
"info": "cupiditate"
},
{
"id": 6,
"name": "Rhianna Jaskolski",
"anonymous": false,
"message": "Assumenda repellat quia totam ab similique aut distinctio. Nesciunt et et id debitis quas. Atque neque quia
ut aut commodi ut.",
"created_at": "2020-11-29T20:56:49.000000Z",
"updated_at": "2020-11-29T20:56:49.000000Z",
"votes": 4,
"info": "perferendis"
},
{
"id": 5,
"name": "Dr. Raquel Stamm IV",
"anonymous": false,
"message": "Voluptas voluptatem impedit illum quia est accusantium porro. Sunt quia dolorem quia animi quo corporis.",
"created_at": "2020-11-29T20:56:49.000000Z",
"updated_at": "2020-11-29T20:56:49.000000Z",
"votes": 0,
"info": "temporibus"
},
{
"id": 4,
"name": "Donavon Predovic",
"anonymous": true,
"message": "Deleniti porro modi quae quam accusantium. Vero eligendi optio nesciunt sit accusamus dolores tenetur
labore. Explicabo qui voluptatem culpa quis. Et quia est reprehenderit qui fugit et.",
"created_at": "2020-11-29T20:56:49.000000Z",
"updated_at": "2020-11-29T20:56:49.000000Z",
"votes": 6,
"info": "non"
},
{
"id": 3,
"name": "Mr. Osbaldo Wilkinson",
"anonymous": false,
"message": "Vel consectetur dicta magni est quia laboriosam voluptatem ab. Voluptas vel officia saepe. Facere molestiae
quis cum voluptate quia et voluptatem. Fuga quia commodi qui eius et.",
"created_at": "2020-11-29T20:56:49.000000Z",
"updated_at": "2020-11-29T20:56:49.000000Z",
"votes": 7,
"info": "odio"
},
{
"id": 2,
"name": "Lew Nitzsche",
"anonymous": true,
"message": "Nobis sunt eaque soluta voluptatibus iure culpa. Minus ut consequatur blanditiis commodi.",
"created_at": "2020-11-29T20:56:49.000000Z",
"updated_at": "2020-11-29T20:56:49.000000Z",
"votes": 0,
"info": "eos"
},
{
"id": 1,
"name": "Adalberto Jones",
"anonymous": true,
"message": "Qui nisi aperiam culpa et. Earum et veniam aut et et neque aut officiis. Debitis eos sequi quasi et. Qui
iusto saepe qui necessitatibus ut.",
"created_at": "2020-11-29T20:56:49.000000Z",
"updated_at": "2020-11-29T22:17:25.000000Z",
"votes": 8,
"info": "ex"
}
],
"first_page_url": "http://tomilola.herokuapp.com/api/messages?page=1",
"from": 31,
"last_page": 4,
"last_page_url": "http://tomilola.herokuapp.com/api/messages?page=4",
"links": [
{
"url": "http://tomilola.herokuapp.com/api/messages?page=3",
"label": "« Previous",
"active": false
},
{
"url": "http://tomilola.herokuapp.com/api/messages?page=1",
"label": 1,
"active": false
},
{
"url": "http://tomilola.herokuapp.com/api/messages?page=2",
"label": 2,
"active": false
},
{
"url": "http://tomilola.herokuapp.com/api/messages?page=3",
"label": 3,
"active": false
},
{
"url": "http://tomilola.herokuapp.com/api/messages?page=4",
"label": 4,
"active": true
},
{
"url": null,
"label": "Next »",
"active": false
}
],
"next_page_url": null,
"path": "http://tomilola.herokuapp.com/api/messages",
"per_page": 10,
"prev_page_url": "http://tomilola.herokuapp.com/api/messages?page=3",
"to": 38,
"total": 38
}

现在，在我的反应中，我设置了我的redux如下。

1. ActionTypes.js

export const MESSAGES_LOADING = 'MESSAGES_LOADING';
export const ADD_MESSAGES = 'ADD_MESSAGES';
export const MESSAGES_FAILED = 'MESSAGES_FAILED';
//Post message
export const ADD_MESSAGE = 'ADD_MESSAGE';
export const MESSAGE_FAILED = 'MESSAGE_FAILED';

2. ActionCreator.js

import * as ActionTypes from './ActionTypes';
import { baseUrl } from '../shared/baseUrl';


export const fetchMessages = (page) => (dispatch) => {

dispatch(messagesLoading());
let url; 
if(page == ""){
url = 'https://tomilola.herokuapp.com/api/messages';
}else{
url = 'https://tomilola.herokuapp.com/api/messages?page='+page;
}

return fetch(url)
.then(response => {
if (response.ok) {
return response;
} else {

var error = new Error('Error ' + response.status + ': ' + response.statusText);
error.response = response;
throw error;
}
},
error => {
var errmess = new Error(error.message);
throw errmess;
})
.then(response => response.json())
.then(messages => dispatch(addMessages(messages)))
.catch(error => dispatch(messagesFailed(error.message)));
}
export const messagesLoading = () => ({
type: ActionTypes.MESSAGES_LOADING
});
export const messagesFailed = (errmess) => ({
type: ActionTypes.MESSAGES_FAILED,
payload: errmess
});
export const addMessages = (messages) => ({
type: ActionTypes.ADD_MESSAGES,
payload: messages
});

//For posting message
export const addMessage = (message) => ({
type: ActionTypes.ADD_MESSAGE,
payload: message
});

export const postMessage = (name, message, anonymous,info) => (dispatch) => {
const newMessage = {
name: name,
message: message,
anonymous: anonymous,
info: info
}
//console.log('Message is this', newMessage);

return fetch(baseUrl + 'messages', {
method: 'POST',
body: JSON.stringify(newMessage),
headers: {
'Content-Type': 'application/json',
},
credentials: 'same-origin'
})
.then(response => {
if (response.ok) {
return response;
}
else {
var error = new Error('Error ' + response.status + ': ' + response.statusText);
error.response = response;
throw error;
}
},
error => {
var errmess = new Error(error.message);
throw errmess;
})
.then(response => response.json())
.then(response => dispatch(addMessage(response)))
.catch(error => { console.log('Post messages ', error.message);
alert('Your message could not be postednError: '+ error.message); })
alert('message posted');

}

ConfigureStore.js

import { createStore, combineReducers, applyMiddleware } from 'redux';
import { Messages } from './messages';
import thunk from 'redux-thunk';
import logger from 'redux-logger';

export const ConfigureStore = () => {
const store = createStore(
combineReducers({
messages: Messages,
}),
applyMiddleware(thunk, logger)
);
return store;
}

4. messages.js

import * as ActionTypes from './ActionTypes';
export const Messages = (state  = { isLoading: true,
errMess: null,
messages:[]}, action) => {
switch (action.type) {
case ActionTypes.ADD_MESSAGES:
return {...state, isLoading: false, errMess: null, messages: action.payload};
case ActionTypes.MESSAGES_LOADING:
return {...state, isLoading: true, errMess: null, messages: []}
case ActionTypes.MESSAGES_FAILED:
return {...state, isLoading: false, errMess: action.payload, messages : []};
case ActionTypes.ADD_MESSAGE: //For actually posting the message
var message = action.payload;

return {...state, messages: state.messages};    
default:
return state;
}
};

数据获取正确，分页工作良好。问题是，在发布到数据库后，我如何更新我的状态。注意，每当我发布到api时，数据都会保存到数据库中，但直到刷新页面后，状态才会更新。此外，如果它没有分页，我会在messages.js reducer中使用return {...state, messages: state.messages.concat(message)};。

5. 在我的主视图组件中，我的函数如下

const mapStateToProps = state => {
state.messages.messages && console.log(state.messages.messages);
return {
messages: state.messages,
likes: state.likes,
}
}
const mapDispatchToProps = (dispatch) => ({
postMessage: (name, message, anonymous) => dispatch(postMessage(name, message, anonymous)),
fetchMessages: (page) => dispatch(fetchMessages(page)),
postLike: (messageId) => dispatch(postLike(messageId))
});

请告诉我如何在发布后立即更新我的状态以显示发布的消息？谢谢很抱歉讲了这么长时间，我希望你明白要点了吗？

Answer 1

当你对你得到的响应进行分页(重新点击api(时，你不能用这些数据来调度你的redux的操作类型吗？您是如何调用分页操作的？