在Redux中获取输入值

我在学习Redux，我很想知道我在这里做错了什么。我有一个简单的输入字段，并且我想分派一个操作，以便在输入字段中发生更改时使文本成为大写。这是我的终极版store：在Redux中获取输入值

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)

来源

2016-09-24 Mahmud Adam

第一个问题是你ReactDOM.render方法，你在哪里派遣一个动作：

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

行应

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

The第二个问题是你如何将这种改变也用于减速器。你的reducer有两个参数，但这并不意味着你会派遣状态和动作。它意味着在Redux的createStore中，Redux将状态传递给reducer。学习这个来看看Redux createStore的最佳方法。这是一段很短的代码。你稍后会感谢你。

因此，在你减速的变化是：

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

的简短摘要你减速的工作方式或调度工作。为什么他们采取我所说的参数：

正如我前面所说的减速器被称为createStore函数，您将减速器作为第一个参数。所以它需要你的reducer并返回一个派发对象，订阅对象等等。基本上这些函数是对createStore中创建的函数的引用。

每次你发送一个动作，你实际上调用了派遣函数createStore返回，基本上你是用这个派生隐式地调用你的reducer。我希望这给你一个想法如何工作。检查源代码的最佳方法。

来源

2016-09-24 17:15:48 FurkanO

我对此有点困惑。如果我只是在组件中使用getInitialState和setState，那么输入文本基本上不会处于状态。但是在添加redux时，我正在返回，在我的reducer中，action.data，而不是状态？ –

你说的是真的。 Redux就像一个巨大的国家经理，其工作就像反应状态一样。您的示例不需要redux状态，但为了学习如何使用redux编写代码，您正在使用redux进行编程。把你的例子作为学习的一步。如果你真的需要这个，请不要多想。只需关注REDX如何工作，如何运行代码。当你需要一个巨大的国家时，你就会武装起来。 – FurkanO

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

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

在减速，代码应该是：

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

来源

2016-09-24 17:14:49 vijayst

在Redux中获取输入值

回答

相关问题