React / Redux-为什么我的动作/减速器不起作用？

Question

新手在这里。 试图让我的Redux action与我的reducer对话并更新store 。

-TL; DR问题进一步向下：

上下文 ：现在，我只想将问题/归约因素分解为单独的文件和文件夹，然后才真正遇到问题。 在此之前，我让所有工作正常进行，而一切都集中在一个文件中。

所以...我有3个文件。
i）将Client.js（顶部级别，其中我的商店是），这需要我的减速器中，然后使用provider ，以获得存储到<Main />

然后Main.js使用mapDispatchToProps将toggleLogin动作（创建者）添加到其onClick道具中。

然后将其向下传递到<LoginButton /> ，可以在其中单击onClick 。 当它是时 ，我可以从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')
);

主站

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调用中的内容，因此您基本上是在尝试分派另一个分派返回的内容。 您还会收到“ ReferenceError：未定义存储”异常，因为在函数内部没有store引用。

Answer 2

只是关闭这个循环-看起来好像是TOGGLE_LOGIN东西：i）我的TOGGLE_LOGIN确实在尝试调度。 它应该只是返回一个对象。

ii）我确实需要bindActionCreators但是使用多个动作会更合适。

iii）最重要的是-当我将TOGGLE_LOGIN更改为返回对象时...为了调试目的，我将两个控制台日志TOGGLE_LOGIN了它的任一侧。 但是作为一个新手/缺席者，我完全忽略了这实际上是在return语句后放置一个函数。 一旦我关闭了控制台日志，我就可以启动并运行了。 感谢大家。