如何从组件 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
        ...
    }
};

感谢到目前为止的所有帮助