为什么reducer不响应action? [英] Why reducer does not respond to the action?

问题描述

试图使 reducer 工作，但每次默认"情况都会触发.代码如下:

交流:

从./types"导入 {INPUT_IDEA_HANDLE}导出函数 inputIdeaHandle(idea) {console.log('它正在工作，我可以访问这个想法');返回 {类型:INPUT_IDEA_HANDLE，有效载荷:想法}}

减速机:

从../actions/types"导入{INPUT_IDEA_HANDLE}导出默认函数(状态=空，动作){开关(动作.类型){案例 INPUT_IDEA_HANDLE :console.log('永不触发');返回 action.payload;默认:console.log('每次触发');返回状态}}import { combineReducers } from "redux";从./inputIdeaReducer.js"导入 inputIdeaReducer导出默认的 combineReducers({inputIdea: inputIdeaReducer});

更新我更改了触发代码，但一直收到

无法读取未定义的属性props"在 return this.props.inputHandle(value);

事件触发:

import React, { Component } from "react";从react-redux"导入{连接}；从redux"导入 { bindActionCreators };import { inputIdeaHandle } from "../actions";类仪表板扩展组件{更改句柄(e){e.preventDefault();让价值 = e.target.value;返回 this.props.inputHandle(value);}使成为() {返回 (<div className="仪表盘容器"><div className="row"><div className="col-12"><h4>在此处输入您的想法</h4><输入类型=文本"onChange={this.changeHandle}值={this.props.inputIdea}/>

);}}函数 mapStateToProps(state) {返回 {inputIdea: state.inputIdea};}函数 mapDispatchToProps(dispatch) {返回 bindActionCreators({输入句柄:输入想法句柄},派遣);}导出默认连接(mapStateToProps，mapDispatchToProps)(仪表板)；

三重检查所有内容，但仍然在控制台中每次都触发".依靠你，伙计们

问候

解决方案

问题在于处理 this 上下文.

您可以按如下方式处理this 上下文

1. 构造函数

   constructor() {超级(道具)；this.changeHandle = this.changeHandle.bind(this)};}

2. 渲染中的箭头函数 : onChange={e =>this.changeHandle(e)}

3. React.createClass :React 将所有函数绑定到 this.
4. 在渲染中绑定:onChange={this.changeHandle.bind(this)}

trying to make reducer works, but everytime "default" case fires. Here is the code:

AC:

import {INPUT_IDEA_HANDLE} from "./types"

export function inputIdeaHandle(idea) {
  console.log('it is working, I have access to the idea');
  return {
    type: INPUT_IDEA_HANDLE,
    payload: idea
  }
}

Reducer :

import {INPUT_IDEA_HANDLE} from "../actions/types"

export default function (state = null, action) {
  switch (action.type) {
    case INPUT_IDEA_HANDLE :
      console.log('never fires');
      return action.payload;
    default:
      console.log('fires everytime');
      return state
  }
}

import { combineReducers } from "redux";
import inputIdeaReducer from "./inputIdeaReducer.js"

export default combineReducers({
  inputIdea: inputIdeaReducer
});

UPDATE I changed my trigger code, but keep getting

Cannot read property 'props' of undefined in return this.props.inputHandle(value);

Event trigger :

import React, { Component } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { inputIdeaHandle } from "../actions";

class Dashboard extends Component {
  changeHandle(e) {
    e.preventDefault();
    let value = e.target.value;
    return this.props.inputHandle(value);
  }

  render() {
    return (
      <div className="dashboard container">
        <div className="row">
          <div className="col-12">
            <h4>Type your idea here</h4>
            <input
              type="text"
              onChange={this.changeHandle}
              value={this.props.inputIdea}
            />
          </div>
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    inputIdea: state.inputIdea
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(
    {
      inputHandle: inputIdeaHandle
    },
    dispatch
  );
}

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

Triple checked everything, but still keep getting 'fires everytime' in console. Count on you, guys

Regards

解决方案

Issue is with handling this context.

You can handle this context as follows

1. constructor

   constructor() { super(props); this.changeHandle = this.changeHandle.bind(this)}; }

2. Arrow function in render : onChange={e => this.changeHandle(e)}

3. React.createClass : React binds all functions to this.
4. Bind in render: onChange={this.changeHandle.bind(this)}

这篇关于为什么reducer不响应action?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！