bugfix> javascript > 投稿

私はreduxとreact.jsの初心者です。

別のファイル(actions/actionArticles.js)のreduxライブラリ関数に接続されている状態変数(articlesTable/index.js)にif条件を設定して、react.jsのコンポーネントでボタンを非表示にしようとしています。 、articlesTable/index.jsのボタンがクリックされると、コンポーネントはactions/actionArticles.jsに接続され、loadMoreData()と呼ばれるactions /actionArticles.jsの関数をディスパッチします。 reduxで状態を設定しようとしている関数は、

articlesActions.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;

articleStatusReducerで、

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)

何らかの理由で、articleStatusが認識されません。

console.log(this.props.articleStatus)

state.articleStatus is undefined

ブール値である必要があるstate.articleStatusを参照するにはどうすればよいですか?

編集: 何らかの理由で、renderメソッドの条件付きJSXブラケットに入れると、未定義で出力されます。

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

回答 2 件
  • 機能中 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という1つの小道具を持つオブジェクトになりました。

  • 小道具の別の名前を試しましたが、ThomasCaillardと同様の方法で

    Reducer.js

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

    コンポーネント内index.js

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

    これまでのすべての助けに感謝します

あなたの答え