Question

我正在努力学习Redux，我很想知道我在这里做错了什么。我有一个简单的输入字段，我想调度一个动作，以便在输入字段发生更改时使文本为大写。这是我的Redux store：

const TOCASE = (state="meow", action) => {
   switch(action.type){
      case 'UPPER':
        return state.toUpperCase()
      case 'LOWER':
        return state.toLowerCase()
      default:
        return state
  }
}
const {createStore} = Redux;
const store = createStore(TOCASE)

这是我的component：

const Case = React.createClass({
   render(){
     return(
       <div>
        {this.props.text}
        <input type="text" value={this.props.text} onChange={this.props.onUpper}/>
       </div>
  )
 }
})


const render = () => ReactDOM.render(<Case
              text={store.getState()}
              onUpper={(e)=>store.dispatch(e.target.value,{type: 'UPPER'})}
              />, document.getElementById('app'))

render()
store.subscribe(render)

Answer 1

对商店的调度应该是操作对象。

onUpper={(e) => store.dispatch({ type: 'UPPER', text: e.target.value })}

在reducer中，代码应为：

case 'UPPER':
        return action.text.toUpperCase();

Answer 2

第一个问题出在您调度动作的ReactDOM.render方法中：

onUpper={(e)=>store.dispatch(e.target.value,{type: 'UPPER'})}

行应

onUpper={(e)=>store.dispatch({type: 'UPPER', data : e.target.value})}

第二个问题是你如何对减速器实施这种改变。您的减速器有两个参数，但这并不意味着您将调度状态和动作。这意味着在Redux的createStore中，Redux将状态传递给reducer。学习这个的最佳方式来看看Redux createStore。这是一段很短的代码。你以后会感谢自己。

因此减速器的变化是：

switch(action.type){
      case 'UPPER':
        return action.data.toUpperCase()
      case 'LOWER':
        return action.data.toLowerCase()
      default:
        return state
  }

简要概述减速机的工作原理或发货方式。为什么他们按照我的说法采取参数：

我之前说过的Reducer是在createStore函数中调用的，你将reducer作为第一个参数。所以它需要你的reducer并返回一个dispatch，subscribe等对象。基本上这些函数是对createStore中创建的函数的引用。

每次调度一个动作时，实际上都会调用返回的调度函数createStore，基本上你是用这个调度隐式调用你的reducer。我希望这可以让你了解事情是如何运作的。检查源代码的最佳方法。

在Redux中获取输入值

2 个答案: