Reactjs 在Redux中的何处更改状态？

因此，我最终了解了使用Redux的Flux架构（我将每个功能与操作连接起来，并从中调用服务）

目前我有这个问题：

我的组件状态：

  this.state = {
      username: '',
      counter: '',
      email: '',
      buttonText: 'textbefore',
  }

<button onClick={() => store.dispatch( reset() ) } //reset must return an action (action creator).
//In the reducer, you will have a case that acts upon this action and returns the new fresh state)

我在此组件中具有功能（我在其中分派操作）：

这是一项行动：

function save(username, email) {
    return dispatch => {
        eventService.signUp({username, email})
        .then(
            response => {
                dispatch(alertActions.success("text))
            },
            error => {
               dispatch(alertActions.error(error))
            }
        )
    }
}

这是常数：

export const eventConstants = {
    SIGNUP_REQUEST: 'EVENT_SIGNUP_REQUEST',
    SIGNUP_SUCCESS: 'EVENT_SIGNUP_SUCCESS',
    SIGNUP_FAILURE: 'EVENT_SIGNUP_FAILURE',
}

这是减速器：

import { eventConstants } from '../constants/event.constants'

export default function event(state={}, action){

    switch(action.type){

        case eventConstants.SIGNUP_REQUEST:
            return{...state, ...{}}

        case eventConstants.SIGNUP_SUCCESS:
            return{...state, ...{}}

        case eventConstants.SIGNUP_FAILURE:
            return{...state, ...{}}
    }
}

我的问题是：

成功发送后，如何将buttonText的状态从“textbefore”更改为“textafter”

我有函数，它是resetForm，我在哪里可以从redux架构调用它

如何处理和支持错误

---

Redux的意义在于让状态管理在组件的外部存储中（它在哪里？）

操作必须告诉存储如何更新状态并提供必要的数据。因此，操作必须至少包含一个类型（一个常量）和更新状态所需的数据。一个存储是用一个reducer创建的（它接受一个状态和一个动作并返回一个状态）。我不确定你的应用程序是做什么的，所以这是基于我的理解

由于使用了承诺，我建议如下：

function save(username, email) {
  store => {
        eventService.signUp({username, email})
        .then(
            response => {
                store.dispatch( {
                  type: C.SUCCESS,
                  buttontext: 'textafter',
                  //plus potentially some other data
                })
            },
            error => {
               store.dispatch ( {
                 type: C.FAILED,
                 //plus potentially some other data
               })
            }
        )
  }
}

const signUp = save(username, email);
signUp(store); //store will dispatch the right action upon resolving or rejecting

它将根据action对象中给出的指令进行操作，并返回一个新状态

const reducer = (state = {}, action) => {
  switch (action.type) {
    case C.SUCCESS:
      return {
        ...state,
        buttontext: action.buttontext
      }
      break;
    case C.FAILED:
      ...
  }

  etc.
}

商店（请参阅）：

您可以将应用商店显式地传递给您的组件（适用于小型应用程序，还有其他方式、上下文、连接等）：

然后是a，它将存储的分派函数作为参数注入，然后在回调函数中使用。您的组件可能期望回调函数作为道具，例如onSuccess:

const mapDispatchToProps = dispatch => ({
  onSuccess() {
    dispatch( reset() ) //the reset is the action creator, recall that it returns an action { type: ..., ... }
  }
}).

因此，当组件在成功时引发时，存储将分派它

然后我们将这些函数传递给connect

const MyContainerComponent = connect(
  mapStateToProps,
  mapDispatchToProps
)(MyPresentationalComponent) // the props are passed to MyPresentationalComponent

---

我希望这能回答您的问题。

好的，谢谢。这很有效。还有一个问题。如果我有MapStateTops函数，我如何传递此新操作以更改组件状态？

const render = () => 
  ReactDOM.render(
    <App store={store} /> //and then again pass store down to child components...
    document.getElementById('react-container')
  )

store.subscribe(render); //will be called each time an action is dispatched (updates the view)

<button onClick={() => store.dispatch( reset() ) } //reset must return an action (action creator).
//In the reducer, you will have a case that acts upon this action and returns the new fresh state)

<Provider store={store}>
  <App /> //that is your root component that contains other components
</Provider>

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

const mapDispatchToProps = dispatch => ({
  onSuccess() {
    dispatch( reset() ) //the reset is the action creator, recall that it returns an action { type: ..., ... }
  }
}).

const MyContainerComponent = connect(
  mapStateToProps,
  mapDispatchToProps
)(MyPresentationalComponent) // the props are passed to MyPresentationalComponent