Question

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

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

上下文：我现在才真正遇到问题，我试图将我的操作/缩减器拆分为单独的文件和文件夹。在此之前，我把一切都工作了，当它全部在一个文件中时，有点像。

所以...我有3个文件。
i）Client.js（顶层，我的商店所在的位置），它将我的减速机放入，然后使用provider 将商店转到<Main />

Main.js然后使用mapDispatchToProps将toggleLogin操作（创建者）导入其onClick道具。

然后传递给<LoginButton />，点击onClick。当是时，我可以从toggleLogin action-creator获取控制台日志。但任何返回的尝试{type：＆＃39; TOGGLE_LOGIN＆＃39;看到a：

＆＃39; ReferenceError：未定义商店＆＃39;或者没有变化......我必须在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调用中包装该函数的内容，因此您基本上尝试调度另一个调度返回的内容。你也得到'ReferenceError：store not defined'异常，因为在你的函数中没有store引用。

Answer 2

关闭这个循环 - 看起来像是一团事物： i）我的TOGGLE_LOGIN确实试图发送。它应该只是返回一个对象。

ii）我需要bindActionCreators但是对于多个动作来说它会更合适。

iii）最重要的是 - 当我更改我的TOGGLE_LOGIN以返回一个对象时......我在其两侧放置了两个控制台日志，用于调试目的。但作为一个新手/缺席的人，我完全忽略了这是在返回声明之后有效地提出了一个功能。一旦我关闭了控制台日志，我就开始运行了。感谢大家。

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

2 个答案: