this.propsでプロップにアクセスすると、戻り値はnullですか？

Question

私はアクション/レデューサー/ストアなどを作成しました。mapStateToProsをShopコンポーネントに渡すと、自分の小道具にアクセスできます。特にこのコンポーネントでは、this.props.authを使用してログオンしている現在のユーザーを検索します。ユーザーにはデフォルトでfalseであるisAdminプロップがあります。私がthis.props.auth.isAdminを呼び出すと、nullを返します。

使用ノード/私のバックエンドのための/のMongoDBを発現

localhost error img

Shop Component top img

Shop Component bottom img

Actions for Reducer

Reducer

Answer 1

ここにあなたの減速のスクリーンショットhttps://i.stack.imgur.com/TRvKP.pngを考えると、私はこのような何かしようとするだろう：

// authReducer.js 
const initialState = { 
    auth: { 
    isAdmin: false, 
    }, 
    isLoggedOn: false 
} 

// create a default schema for you state rather than defaulting to null 
export default function (state = initialState, action) { 
    // the rest of your code 
} 

コンポーネントによって期待されているものに準拠した方法で、この意志のセットアップ認証減速であなたの最初のReduxの状態を。

アクションごとに

、FETCH_USERとLOGOUT_USER、あなたは新しい状態を記述するいくつかのプロパティを持つオブジェクトを返すようにしたいでしょうが、あなたは現在、完全に異なるデータ形式であるLOGOUT_USER戻りfalse、（ブール値）は、その後何も設定しています私は、あなたが認証状態（通常はあなたがオブジェクトを望む）の表現を使っていると思います。状態が変化して

は、一般的で便利なパターンが新しいと古い状態をマージし、新しいオブジェクトを返すことですので、あなたは、アクションのために、このようなもので終わる可能性：

case LOGOUT_USER: 
    return { ...state, action.payload } 

この性を保証redux状態は常に特定の形状に適合し、コンポーネント内の小道具のnull/undefinedエラーを回避するのに役立ちます。

そこから、さまざまな状況の下で、isAdminプロパティをtrueに更新するアクションをディスパッチできます。