Javascript 反应/重做-为什么我的动作/减速机不起作用？

我是新手。试图让我的Redux

操作

与我的reducer对话并更新

存储

-TL；问题再往下问:

上下文：我现在只是在尝试将我的操作/还原程序拆分为单独的文件和文件夹，所以才真正遇到问题。在此之前，我让所有的东西都工作了，当它们都在一个文件中时，诸如此类

所以。。。我有3个文件
i） 一个Client.js（顶层，我的商店所在的位置），它接收我的reducer，然后使用

提供者

将商店转到

Main.js然后使用

mapDispatchToProps

将

切换登录

操作（创建者）放入其

onClick

属性中

然后将其传递到

，在此可以单击

onClick

。如果是，我可以从toggleLogin操作创建者那里获得控制台日志。但任何返回{type:'TOGGLE_LOGIN'}的尝试都会看到：

“ReferenceError:未定义存储”或没有更改。。。我必须将console.log记录到任何一方，以发现问题位于

return{}

区域内。所以

TL；问题博士：为什么我的减速机不采取行动并更新商店？我快发疯了

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')
);

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

应该只返回

{type:'TOGGLE\u LOGIN'}

bindActionCreators

是将该函数包装到

store.dispatch

调用中的，因此您基本上是在尝试分派另一个dispatch返回的内容。

---

您还得到了“ReferenceError:store未定义”异常，因为在您的函数中没有

store

引用。

toggleLogin

应该只返回

{type:'TOGGLE\u LOGIN'}

bindActionCreators

是将该函数包装到

store.dispatch

调用中的，因此您基本上是在尝试分派另一个dispatch返回的内容。

---

您还得到了“ReferenceError:store未定义”异常，因为在您的函数中没有

store

reference。

刚刚结束了这个循环-看起来像是一个网格： i） 我的

TOGGLE\u登录确实试图调度。它应该只是返回一个对象


ii）我确实需要
bindActionCreators
，但如果有多个操作，则更合适


iii）最重要的是-当我更改我的
切换\u登录
以返回对象时。。。为了调试，我把两个控制台日志放在它的两侧。但是作为一个新手/心不在焉的人，我完全忽略了这实际上是在return语句之后放置函数。一旦我取下控制台日志，我就开始运行了。谢谢大家
 刚刚结束了这个循环-看起来就像是一个网格：
i） 我的
TOGGLE\u登录确实试图调度。它应该只是返回一个对象


ii）我确实需要
bindActionCreators
，但如果有多个操作，则更合适


iii）最重要的是-当我更改我的
切换\u登录
以返回对象时。。。为了调试，我把两个控制台日志放在它的两侧。但是作为一个新手/心不在焉的人，我完全忽略了这实际上是在return语句之后放置函数。一旦我取下控制台日志，我就开始运行了。谢谢大家
 
toggleLogin
应该只返回
{type:'TOGGLE\u LOGIN'}
bindActionCreators
是将该函数包装在
存储中的函数。dispatch
调用，因此您基本上尝试将其分派两次，而在您的函数中没有
store
引用。它是未定义的，因为您不导入它--但action creator应该只返回一个对象，不发送。谢谢@DaveNewton&@SergiuParaschiv-但我不完全确定如何将商店导入到该操作中？我认为
connect（）
和
的目的是在整个过程中都可以访问分派/操作和状态/存储？
toggleLogin
应该只返回
{type:'TOGGLE\u LOGIN'}
bindActionCreators
是将该函数包装在
存储中的函数。dispatch
调用，因此您基本上尝试将其分派两次，而在您的函数中没有
store
引用。它是未定义的，因为您不导入它--但action creator应该只返回一个对象，不发送。谢谢@DaveNewton&@SergiuParaschiv-但我不完全确定如何将商店导入到该操作中？我原以为
connect（）
和
的目的是整个过程都可以访问分派/操作和状态/存储？谢谢@SergiuParaschiv，我确实从toggleLogin.js中取出了
store.dispatch（{..
，并将其设置为：

导出函数toggleLogin（）{console.log（'这确实有效'）；return{type:'TOGGLE_LOGIN'}console.log（'this doesn work'）；}
第一个con日志工作了，但是第二个没有。所以我仍然有点不知道如何将它更改为仅使用type的对象来修复它。我是否遗漏了什么？谢谢@SergiuParaschiv，我确实使用了
store.dispatch({..
退出toggleLogin.js，并将其设置为：

导出函数toggleLogin（）{console.log（'this doeswork'）；返回{type:'TOGGLE_LOGIN'}console.log（'this doesnot work'）；}
第一个con日志有效，但第二个没有。因此，我仍然有点不知道如何将它更改为仅使用类型的对象来修复它。我是否遗漏了什么？
export const myReducer = (state = { isLoggedIn: false }, action) => {
  switch (action.type) {
    case 'TOGGLE_LOGIN':
    return {
      isLoggedIn: !action.isLoggedIn
    }

    default:
    return state;
  }
};

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;

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