React/Redux - 私のアクション/レデューサーが機能しないのはなぜですか？

Question

ここの初心者です。 Redux actionを私のレデューサーと話して、storeを更新しようとしています。

- TL; DRは、さらに下の質問：

コンテキスト：私は本当に私は別のファイルとフォルダの中に私の行動/減速を分割しようとしていることを、今の問題を取得しています。これに先立って、私はすべてが1つのファイルの中にあったとき、すべてのことをやっていました。

私は3つのファイルを持っています。
i）は、次にAに私の減速を取るClient.js（私の店があり、トップレベル、）、および<Main />にprovider取得へのストアを使用しています

Main.jsはその後、取得するためにmapDispatchToPropsを使用していますtoggleLoginアクション（作成者）にそのonClick小道。

これは、その後onClickをクリックすることができ<LoginButton />に渡されます。 がの場合、私はtoggleLoginアクション作成者からコンソールログを取得できます。しかし、{type： 'TOGGLE_LOGIN'}を返そうとすると、次のいずれかが表示されます。

「ReferenceError：ストアが定義されていない」または変更されていません...問題を見つけるためにconsole.log return {}エリア。だから...

TL; DR質問なぜ私の減量はそのアクションを拾って店を更新しないのですか？それは私をナイトにしてくれました。

ClientJS：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Redux from 'redux'; 

import Main from './Components/Main' 

import { myReducer } from './Reducers/reducer'; 
import { createStore } from 'redux'; 
import { Provider } from 'react-redux'; 


const store = createStore(myReducer); 

ReactDOM.render(
    <Provider store={store}> 
     <Main /> 
    </Provider>, 
    document.getElementById('root') 
); 

Main.Js

import React from 'react'; 

import LoginButton from './LoginButton'; 
import PlayButton from './PlayButton'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 
import { toggleLogin } from '../actions/toggleLogin'; 

const Main = (props) => { 

const { onClick} = props; 

    return (
    <div> 
    <h1>hello world</h1> 
     <LoginButton onClick={onClick} /> 
     <PlayButton /> 
    </div> 
); 
}; 

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


const mapDispatchToProps = (dispatch) => { 
    return bindActionCreators({ 
    onClick: toggleLogin, 
    }, dispatch) 
} 

export default connect(mapStateToProps, mapDispatchToProps)(Main); 

reducer.js：

export const myReducer = (state = { isLoggedIn: false }, action) => { 
    switch (action.type) { 
    case 'TOGGLE_LOGIN': 
    return { 
     isLoggedIn: !action.isLoggedIn 
    } 

    default: 
    return state; 
    } 
}; 

LoginButton.js

import React from 'react'; 
import Redux from 'redux'; 

const LoginButton = (props) => { 

    const { onClick } = props; 

    return (
    <div> 
     <button onClick={onClick}>LOGIN/LOGOUT</button> 
    </div> 
); 
}; 

export default LoginButton; 

toggleLogin.js（アクションの作成者）：

export function toggleLogin() { 
    console.log('this works'); 
    store.dispatch({ 
    type: 'TOGGLE_LOGIN', 
    }); 
    console.log('this doesnt work'); 
} 

Answer 1

toggleLoginだけ{type: 'TOGGLE_LOGIN'}を返す必要があります。 bindActionCreatorsはその機能をstore.dispatchコールで囲んでいるので、基本的には別のディスパッチが返すものをディスパッチしようとしています。 また、関数内にはstoreという参照がないため、 'ReferenceError：store is defined not defined'例外が発生します。

Answer 2

このループのループを閉じると、それは物のメッシュのように見えます。 i）私のTOGGLE_LOGINが本当にディスパッチしようとしていました。それはちょうどオブジェクトを返しているはずです。

ii）i はとなりました。bindActionCreatorsが必要ですが、複数のアクションでより適切になっていました。

iii）最も重要なのは、私がTOGGLE_LOGINオブジェクトを返すように変更したとき...デバッグの目的で、2つのコンソールログを両側に置いていたということです。しかし、初心者/不在の心を持って、私はそれが効果的にreturn文の後に関数を入れていたことを完全に見落としました。コンソールログを取ってから、私は起動していました。みんな、ありがとう。