Reactjs 如何在构造函数中分派更改？

我正在努力学习redux。我想我的还原器做得很好，我可以从存储中提取数据并通过道具进行设置

但我不能把注意力集中在商店状态的操作和更改数据上

我有这个：

const mapDispatchToProps = (dispatch) => {
    return{
        what goes in here?
    }
}

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

---

我需要知道如何在const内部发送更改。只需简单地将文本添加到空状态。示例：状态为apples:''，我想在其中添加“red delicious”。

mapDispatchToProps

提供了一种将

动作创建者连接到组件的方法。假设您有一个动作创建者，它递增一个
计数器
状态

export const change = value =>({
    type: 'CHANGE_FRUIT',
    fruit : value
})

您希望从一个组件传递
value
。首先在这个组件中使用
connect
HOC，就像您已经在做的那样。现在，您需要从
actions
文件夹导入
incrementCounter

import { change as changeFruit } from './actions/fruit'

现在像这样使用
mapDispatchToProps

const mapDispatchToProps = dispatch =>({
    change : fruit => dispatch(changeFruit(fruit))
})

import { change as changeFruit } from './actions/fruit'

class Component extends React.component{
    render(){
        const { fruit, change } = this.props
        return(
            <>
                <div>{fruit}</div>
                <button onClick={() => change('orange')}>Change to orange</button>
            </>
        )
    }
}

const mapStateToProps = state =>({
    fruit : state.fruit
})

const mapDispatchToProps = dispatch =>({
    change : fruit => dispatch(changeFruit(fruit))
})

export default connect(mapStateToProps, mapDispatchToProps)(Component)

const initialState = {
    fruit: 'apple'
}

export const reducer = (state = initialState, action) =>{
    switch(action.type){
        case 'CHANGE_FRUIT' : return{
            ...state,
            fruit : action.fruit
        }

        default : return state
    }
}

现在，组件的
props
中序列化了一个
action creator
，当您调用
props.increment（2）
时，这将等同于调用

dispatch(changeFruit('apple'))

这里是您应该始终执行
props.increment
，而不是在组件内部直接调用
dispatch

因此，组件内部的完整实现可以如下所示

const mapDispatchToProps = dispatch =>({
    change : fruit => dispatch(changeFruit(fruit))
})

import { change as changeFruit } from './actions/fruit'

class Component extends React.component{
    render(){
        const { fruit, change } = this.props
        return(
            <>
                <div>{fruit}</div>
                <button onClick={() => change('orange')}>Change to orange</button>
            </>
        )
    }
}

const mapStateToProps = state =>({
    fruit : state.fruit
})

const mapDispatchToProps = dispatch =>({
    change : fruit => dispatch(changeFruit(fruit))
})

export default connect(mapStateToProps, mapDispatchToProps)(Component)

const initialState = {
    fruit: 'apple'
}

export const reducer = (state = initialState, action) =>{
    switch(action.type){
        case 'CHANGE_FRUIT' : return{
            ...state,
            fruit : action.fruit
        }

        default : return state
    }
}

“操作”只是一个简单的对象，它描述了您希望在商店中发生的某种更改。因此，在您希望向字符串添加文本的情况下，这样的操作可能如下所示：

{
  type: 'ADD_TEXT',
  value: 'red delicious'
}

动作创建者只不过是一个返回这样一个普通对象的函数。请注意，我们可以概括动作创建者，这样您就可以传入要添加的字符串，而不是将其硬编码为“red delicious”

const addText = value => ({ type: 'ADD_TEXT', value })

为了将此操作“发送”到减速器，需要将其传递给Redux提供的
dispatch
函数。例如，这将分派行动：

const action = addText('red delicious') // Create the plain action object
dispatch(action) // Send it to the reducers

如果一直手动编写，可能会有点乏味，因此
mapDispatchToProps
有助于解决这一问题。这是一个为
connect
提供的函数，它在一个地方完成上述所有工作，使组件代码的其余部分不杂乱无章。Redux在内部调用它，为连接的组件生成道具。所以当你这么做的时候

const mapDispatchToProps = dispatch => ({
  addText: value => {
    // Same code as above:
    const action = addText('red delicious')
    dispatch(action)
  }
})

在组件中，您可以调用

props.addText('red delicious')

请注意，在应用程序中使用connect函数时，它需要两个参数：第一个参数是当前状态，第二个参数是分派，用于指定将要执行的操作类型。分派依赖于分派的特定操作将被称为在提供程序中实现的reducer链接的特定操作使用时在店内

<Provider store={store}>

基本上，我是在回答你感到困惑的部分：

return {
    what goes in here?
}

理想情况下，如果您将其视为类概念，那么假设您有一个类，可以方便地选择和保存您最喜欢的颜色选择

因此，您只需创建一个类组件并定义一个方法saveSelection，该方法应将选择保存到存储。还有，有谁想得到你们的选择或者看到你们选择的颜色，他们可以从商店获得

回到Redux，规则说，您不能直接更新存储的状态。您必须发送一个操作

因此，如果我已经决定为此创建一个方法saveSelection，我应该怎么做，以便它能够分派一个操作

可能是这样的：

class ColorSelector {
    saveSelection () {
      dispatch(action); //dispatch is some way to dispatch an action
    }
}

 //I pass my selected color to saveSelection method and that should save
 saveSelection(dataToUpdate) {
      dispatch({type: actionType, data: dataToUpdate})
 }

但是，action不仅仅是一个命令、文本或值，我们需要指定，action的类型（因为reducer需要确定它需要根据action更新哪些数据）以及我想要保存的数据。这将是一个有意义的行动

所以，我想要这样的东西：

class ColorSelector {
    saveSelection () {
      dispatch(action); //dispatch is some way to dispatch an action
    }
}

 //I pass my selected color to saveSelection method and that should save
 saveSelection(dataToUpdate) {
      dispatch({type: actionType, data: dataToUpdate})
 }

你脑子里可能有一件事->我如何获得调度，我是如何在这里使用它的？
这一点很快就会清楚，但首先让我们替换分派参数，我们可以这样写：

saveSelectionAction(dataToUpdate) {
  return {type: actionType, data: dataToUpdate}
}

我们的方法是：

saveSelection(dataToUpdate) {
  dispatch(saveSelectionAction(dataToUpdate))
}

而saveSelectionAction将成为操作创建者的一部分。现在是调度部分。因此，让我们用另一个提供分派和公开saveSelection的方法包装这个方法

anotherMethodWhichPassesDispatch(dispatch) {
    // unleash the power of closure
    return {
        saveSelection: saveSelection(dataToUpdate) {
            dispatch(saveSelectionAction(dataToUpdate))
        }
    }
}

或者更准确地说

// Method to map dispatching action to components props
anotherMethodWhichPassesDispatch(dispatch) {
    // return list of your created action you want as props
    return {


        // Name it whatever you want and that will be a void method passing data
        saveSelection: (dataToUpdate) => {
            // pass the action creator's result which is defined above
            // Or, exported from a separate file
            dispatch(saveSelectionAction(dataToUpdate))
        }
    }
}

现在将此方法作为参数传递给connect HOC，它将saveSelection映射到props，并向方法提供分派。
connect（mapStateToProps，另一种热方法，它的资产分配）（
或者我们可以将其重命名为
mapsDispatchToprops

现在回到类的saveSelection方法并执行以下操作：

saveSelection = (selectedColor) => {
    this.props.saveSelection(selectedColor);
}

就这样。
这可能会对你有所帮助。这对我来说仍然很困惑。你能举一个例子吗？我有一个动作创建者，它在文本中呈现。我很确定我遵循了你在这里写的所有内容，点击一下，我可以看到动作将水果变成橙色，但它对国家没有任何作用。所以问题可能出在你的减速机上。发布它的代码
const initState={fruit:'}const rootReducer=（state=initState，action）=>{console.log（'action:'，action）；console.log（'state:'，state）；return state；}导出默认rootReducer
为格式错误道歉，我不知道如何在注释中添加空格。