如何從組件 index.js (react.js) 中引用 redux 存儲中的變量

Question

我是 redux 和 react.js 的新手，

我試圖通過在狀態變量 (articlesTable/index.js) 上放置一個 if 條件來使 react.js 中組件上的按鈕消失，該狀態變量連接到另一個文件 (actions/actionArticles.js) 上的 redux 庫函數, 當articlesTable/index.js 上的按鈕被點擊時，該組件會與actions/actionArticles.js 連接，並在actions/actionArticles.js 中調度一個名為loadMoreData() 的函數。 我試圖在 redux 中配置狀態的功能是，

在文章Actions.js

export const loadMoreArticles = () => async (dispatch,  getState) => {
const lastArticleKey = Object.keys(getState().articlesMap).pop();
const lastArticle = getState().articlesMap[lastArticleKey];

console.log("articleMap", getState().articlesMap);
console.log("Last article", lastArticleKey, lastArticle);

let filteredArticles = {};
const uid = getState().auth.uid;
const userLevel = getState().profile.userLevel;
} else {
    const filteredArticlesArray = [];
    var lastArticleReached = false;
    ...

    var lastArticleInArray = filteredArticlesArray[filteredArticlesArray.length-1];
    if (lastArticleInArray[0]===lastArticleKey) {
        console.log("Bingo, last article reached!");  
        lastArticleReached = true;
    }
    else if (lastArticleInArray[0]!== lastArticleKey)
    {
        console.log("Not last article");  
        lastArticleReached = false;
    }
   
    filteredArticles = Object.fromEntries(filteredArticlesArray.reverse());
}
dispatch({type: LAST_ARTICLE_REACHED, payload: lastArticleReached})

...
};

我用

dispatch({ type: LOAD_MORE_ARTICLES, payload: filteredArticles });

在上面的代碼片段中

根減速器看起來像這樣，reducers/index.js

import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';

import articlesStatusReducer from './articlesStatusReducer';

const rootReducer = combineReducers({
    ...
    articlesStatus: articlesStatusReducer,
    form: formReducer,
    ...

});

export default rootReducer;

在文章StatusReducer中，

import {LAST_ARTICLE_REACHED} from "../actions/types";

export default function(state = {}, action) {
    switch(action.type) {
        case(LAST_ARTICLE_REACHED):
            console.log(action.payload);
            return action.payload;
        default:
            return state;
    }
}

在articlesTable/index.js中，我是這樣連接的

const mapStateToProps = (state) => {
    
    return {
        articlesMap: state.articlesMap,
        appStatus: state.appStatus,
        profile: state.profile,
        lastArticleReached: state.articlesStatus,
    }
};

const mapDispatchToProps = (dispatch) => {
    return {
        getArticlesWithData: () => dispatch(getArticlesWithData()),
        loadMore: () => dispatch(loadMoreArticles())     
    }
};

export default compose(
    withRouter,
    connect(mapStateToProps, mapDispatchToProps)
)(ArticlesTable)

出於某種原因，文章狀態無法識別，當我這樣做時

console.log(this.props.articleStatus)

state.articleStatus 未定義

我如何引用 state.articleStatus ，它應該是 boolean ？

編輯：出於某種原因，當我將它放在渲染方法中的條件 JSX 括號中時，它會打印出 undefined

render () => {
{
console.log(this.props.lastArticleReached), 
!this.props.lastArticleReached 
: <Button> </Button>
?
<div><div>
}
}``

Answer 1

在函數mapStateToProps ，您應該將state.articleStatus映射到道具。

像這樣的東西：

    const mapStateToProps = (state) => {
    return {
        articlesMap: state.articlesMap,
        appStatus: state.appStatus,
        profile: state.profile,
        lastArticleReached: state.articlesStatus,
        articleStatus: state.articleStatus
      }
  };

所以this.props.articleStatus會起作用。 :)

問題出在你的減速機上。 您的減速器的每種情況都必須返回狀態，但在您的情況下，返回action.payload 。

嘗試這樣的事情。

case(LAST_ARTICLE_REACHED):
        console.log(action.payload);
        return {...state, articleStatus: action.payload};

像這樣，articlesStatus 變成了一個帶有一個道具的對象，articleStatus，你的布爾值。

Answer 2

我嘗試了道具的另一個名稱，但使用與 Thomas Caillard 類似的方法，

減速器.js

case(REACH_LAST_ARTICLE):
            return  {...state, lastArticleReached: action.payload}

在組件index.js 中

const mapStateToProps = (state) => {
    return {
        ...
        lastArticleReached: state.articlesMap.lastArticleReached
        ...
    }
};

感謝到目前為止的所有幫助