Question

我是第一次在应用程序中使用Redux，并且无法理解如何将组件内部状态传递给全局状态对象。

`export default class ComponentOne extends Component {
   constructor() {

     this.state = {
       number: 0
     }

     handleNumber = (e) => {
       this.setState({
         number: e.target.value 
       })
     }

     render() {
       console.log(this.state.number)
       return (
         <div> 
          <input onChange={this.handleNumber} type="number"> 
         </div> 
       )
     }
   }
}

function mapStateToProps(state) {
  return {
    number: state
  }
}

export default connect(mapStateToProps, { HANDLE_NUMBER_CHANGE })(ComponentOne);`

我的行动＆amp;减速器：

`const HANDLE_NUMBER_CHANGE = state => {
  return {
    type: 'HANDLE_NUMBER_CHANGE'
  }
}

export default (state = 0, action) {
  switch(action.type) {
    case 'HANDLE_NUMBER_CHANGE': 
      //Im lost here - trying to save internal state 
    default: 
      return state; 
  }
}`

我的商店设置正确，使用redux-thunk作为中间件。当我记录store.getState（）时 - 无论我的组件内部状态如何，它都会记录0。谁能解释一下这是如何工作的？

提前致谢！

Answer 1

当您拥有全局状态时，您不需要将其保存到本地状态。它可以作为this.props.value。

访问组件

设置全局状态的方法是将值传递给动作创建者，动作创建者将其返回到动作中。 reducer将它放在action对象中并保存它。

有许多简单的例子可供使用。这是one。

以下是更改后的代码：（我没有运行它 - 可能有错误，但我相信你可以自己修复它们;我已经将代码分成了几个文件 - 通常这是怎么做的。看看如果您遇到问题，可以在上面的链接中找到示例）

// file:  src/components/ComponentOne.js

import React from 'react';
import { connect } from 'react-redux';
import { handleNumber } from '../actions';

class ComponentOne extends Component {

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

  render() {
    console.log(this.state.number)
    return (
     <div> 
      <input onChange={(e) => this.props.handleNumber(e.target.value)} type="number" /> 
     </div> 
   );
  }
}

function mapStateToProps(state) {
  return {
    number: state
  }
}

export default connect(mapStateToProps, { handleNumber })(ComponentOne);

// end of file

/// separate file:   src/reducers/index.js ////

import { combineReducers } from 'redux';
import dataReducer from './dataReducer';

export default combineReducers({
  number: dataReducer
});

// end of file

// separate file:   src/reducers/dataReducer.js
const DataReducer = (state = 0, action) => {
  switch(action.type) {
    case 'HANDLE_NUMBER_CHANGE': 
      return action.payload; 
    default: 
      return state; 
  }
};

export default DataReducer;
// end of file

// separate file:   src/actions/index.js
export function handleNumber(value) {
  return ({
    type: 'HANDLE_NUMBER_CHANGE',
    payload: value
  });
}

Answer 2

我没有看到让你的内部状态与你的商店相等的逻辑。我并不是说你错了，但它似乎并不符合redux范式。然而...

行动应该......

NaN

Reducer应该看起来像......

export function HANDLE_NUMBER_CHANGE = number => {
  return {
    type: 'HANDLE_NUMBER_CHANGE'
    payload: number
  }
}

最后，您需要从onChange函数调用一个调度。

export default (state = {number: 0}, action) {
  switch(action.type) {
    case 'HANDLE_NUMBER_CHANGE': 
        return (state = {
            ...state,
            number: action.payload,
});

如果您没有将值传递给操作，则reducer无法将其添加到商店。

Answer 3

如果您使用redux管理ComponentOne州，则不需要反应状态。

<强>的ComponentOne

export default class ComponentOne extends Component {
   constructor() {

     handleNumber = (e) => {
       this.props.updateNumber(e.target.value);//call dispatch method
     }

     render() {
       return (
         <div> 
          <input onChange={this.handleNumber} type="number"> 
         </div> 
       )
     }
   }
}


function mapStateToProps(state) {
  return {
    number: state.number //map updated number here
  }
}


function mapDispatchToProps(state) {
  return {
    updateNumber(number){
        dispatch({type: 'HANDLE_NUMBER_CHANGE',number});//dispatch action
    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(ComponentOne);

<强>减速器：

export default (state = 0, action) {
  switch(action.type) {
    case 'HANDLE_NUMBER_CHANGE': 
      return {
          ...state,number : actio.number//update number here
      }
    default: 
      return state; 
  }
}

如何使用Redux

3 个答案: