在分页的 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';

1. 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 posted\nError: '+ error.message); })
    alert('message posted');
    
}

1. 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 减速器中使用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 的操作类型吗？你是如何调用分页动作的？