REDUX：なぜ店舗が自分のコンポーネントにデータを提供しないのですか？

Question

ここで初心者はReduxを学ぼうとしています。 ゴール：クリックしてログイン/ログアウトするボタンを取得し、いずれかの方法でストアを真/偽のステータスとして更新します。

const store = createStore(myReducer) 私のレデューサーを渡して、私の店を作りました。

これはデフォルトの状態がログアウトしています。ボタンがクリックされると、その逆を返します。

私はこの動作がデバッグを通じて機能することを知っています。

function myReducer(state = { isLoggedIn: false }, action) { 
    switch (action.type) { 
    case 'TOGGLE': 
    return { 
     isLoggedIn: !state.isLoggedIn 
    } 
    default: 
    return state 
    } 
} 

問題はここから始まります - 私はstore.getState（）データにアクセスするためにを試してみてくださいとき。

class Main extends React.Component { 
    render() { 
    return (
     <div> 
     <h1>Login Status: { state.isLoggedIn }</h1> 
     <button onClick={this.props.login}>Login</button> 
     </div> 
    ) 
    } 
} 

const render =() => { 
    ReactDOM.render(<Main status={store.getState().isLoggedIn} login={() => store.dispatch({ type: 'TOGGLE' })}/>,  document.getElementById('root')); 
} 

store.subscribe(render); 
render(); 

私はstore.getState（）isLoggedIn & store.getState（）& this.props.statusを試してみましたが、その後、メインコンポーネントにstore.getState（）isLoggedInを割り当てました - 。。しかし、何も動作。

どこに間違っているのか誰にでも教えてもらえますか？

Answer 1

getStateを使用して直接ストアにアクセスしてデータを検索することはありません。 Redux docsはプロセスを詳しく説明していますが、基本的にはconnectメソッドreact-reduxパッケージを使用して各コンポーネントをReduxストアに接続します。

はここで、これはあなたの上のコンポーネントのために働くことができる方法の例です：あなたは、その後Mainコンポーネントの代わりにMainContainerをレンダリングしたい

import React, { Component } from 'react' 
import { connect } from 'react-redux' 
import Main from '../components/Main' 

class MainContainer extends Component { 
    render() { 
    return <Main {...this.props} /> 
    } 
} 

const mapStateToProps = state => ({ 
    isLoggedIn: state.isLoggedIn, 
}) 

const mapDispatchToProps = dispatch => ({ 
    login() { 
    dispatch({type: 'TOGGLE'}) 
    }, 
}) 

MainContainer = connect(
    mapStateToProps, 
    mapDispatchToProps, 
)(MainContainer) 

export default MainContainer 

。コンテナはレンダリングするときにisLoggedInとloginを小道具としてMainに渡します。