Question

当我可以获取类似这样的状态时，我试图了解使用getState（）有什么意义

return{
  ...state
}

以该代码为例。我能够检索数据，发布数据等。

何时使用getState（）有用？

const initialState = {
    images:[],
    likedByuser: false
}
export default  (state = initialState, action) => {
    switch (action.type) {
        case GET_IMAGES:
            return{
                ...state,

            }
        case FETCH_IMAGES_SUCCESS:
            return{
                ...state,
                images:action.images
            }
        case UPLOAD_IMAGE:
            return{
                ...state
            }
        case UPLOAD_IMAGE_SUCCESS:
            const newImage = action.data
            return {           
                images:[
                    {
                        id: newImage[0].id,
                        user:{
                            username:newImage[0].user.username
                        },
                        comments:{
                        comment_body: newImage[0].comments.comment_body  
                        },
                        image_title: newImage[0].image_title,
                        img_url: newImage[0].img_url,
                    },
                    ...state.images, // pass the previous images, 
                ]   
            }
            ....

Answer 1

通常，您将在动作创建者内部使用getState()，在其中您想访问全部/部分还原状态。 reducer 内部的状态不是完整的redux 状态 。相反， Reducer只处理您在 initialState 中定义的内容。

例如...

postActions.js

export const postToArticle = props => (dispatch, getState) => {
   const state = getState(); // access to entire redux tree

  ...etc

};

设置状态时，理想情况下，将状态的每个部分都分成自己的化简器。例如，我的一个化简器仅处理messages，而另一个仅处理user认证：

serverMessageReducer.js

import * as types from "../types";

export const initialState = {
    message: "",
    show: false,
    type: "",
};

/**
 * @function serverMessageReducer
 * @param {object} state - an object containing success/error/info server messages.
 * @param {object} action - type and payload to be reduced.
 * @returns {object} - messages state.
 */
const serverMessageReducer = (state = initialState, { payload, type }) => {
    switch (type) {
        case types.MESSAGE_HIDE:
            return { ...state, show: false };
        case types.MESSAGE_RESET:
            return { ...state, message: "", type: "" };
        case types.MESSAGE_SET:
            return { message: payload.message, show: true, type: payload.type };
        default:
            return state;
    }
};

export default serverMessageReducer;

userAuthReducer.js

import * as types from "../types";

export const initialState = {
    id: "",
    email: "",
    firstName: "",
    lastName: "",
    role: "",
};

/**
 * @function authReducer
 * @param {object} state - an object containing current user session state.
 * @param {object} action - type and payload to be reduced.
 * @returns {object} - user session state.
 */
const authReducer = (state = initialState, { payload, type }) => {
    switch (type) {
        case types.USER_SIGNIN:
            return { ...state, ...payload };
        case types.USER_SIGNOUT:
            return initialState;
        default:
            return state;
    }
};

export default authReducer;

因此，假设我需要访问两个单独的状态，则可以通过mapStateToProps将其传递给动作创建者，也可以通过getState()从动作创建者内部检索它。

顺便说一句，您的GET_IMAGES和UPLOAD_IMAGE案例不需要在化简器中定义，因为它们只是返回已经存在的状态。如果您使用switch/case设置default语句，则该语句将已经处理：

const initialState = {
    images:[],
    likedByuser: false
};

export default  (state = initialState, action) => {
    switch (action.type) {
        case FETCH_IMAGES_SUCCESS:
            return{
                ...state,
                images:action.images
            }
        case UPLOAD_IMAGE_SUCCESS:
            const newImage = action.data
            return {           
                images:[
                    {
                        id: newImage[0].id,
                        user:{
                            username:newImage[0].user.username
                        },
                        comments:{
                        comment_body: newImage[0].comments.comment_body  
                        },
                        image_title: newImage[0].image_title,
                        img_url: newImage[0].img_url,
                    },
                    ...state.images, // pass the previous images, 
                ]   
            }

          ...etc

        default: return state
    }

redux getState什么时候有用

1 个答案: