Redux 在哪里更改状态？

Question

所以我终于了解了使用 Redux 的 Flux 架构（我将每个函数与操作连接起来并从那里调用服务）

目前我有这个问题：

我的组件状态：

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

我在这个组件中有函数（我在其中调度操作）：

  handleSubmit(e) {
    e.preventDefault()
    if(username && email) {
        this.props.dispatch(eventActions.save(username, email))
        }
      else {
        this.props.dispatch(alertActions.warn("Wystąpił błąd"))
        this.props.dispatch(viewActions.hide())
    }
  }

这是行动：

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, ...{}}
    }
}

我的问题是：

1. 发送成功后如何将buttonText的状态从'textbefore'更改为'textafter'？

2. 我有函数，哪个resetForm，我在哪里可以从redux架构调用它？

    resetForm = () => {
        this.setState({
            name: '',
            message: '',
            email: '',
            buttonText: 'Wiadomość wysłana'
        })
    }

1. 如何处理和支持错误？

Answer 1

拥有 Redux 的重点是在 STORE 中对组件进行状态管理 OUTSIDE（它在哪里？）。

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

由于使用了 Promise，我会建议以下内容：

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

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

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

  etc.
}

本店（见docs）：

import { createStore } from 'redux'

function reducer(state = {}, action) {
  ...
}

const initialState = { ... };

const store = createStore(reducer, /*initial state*/initialState)

store.dispatch({
  ...
})

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

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)

React Redux 总结

React Redux 简化了通过上下文隐式传递存储所涉及的复杂性。

首先，我们使用提供程序并用它包装应用程序组件。因此，商店将被添加到上下文中，并且组件将在每次调度操作时呈现。

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

然后，我们使用connect 来创建容器组件。当我们想要将商店与 UI 组件分离时使用这些。相反，容器将连接 UI 组件和商店。 UI 组件甚至根本不知道他们正在使用商店！

connect 需要两个参数，mapStateToProps 将状态作为参数注入并返回将映射到 props 的对象。

例如，如果您的组件需要一个 buttonText 属性：

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

然后是mapDispatchToProps，它将商店的调度函数作为参数注入，然后在回调函数中使用。您的组件可能期望回调函数作为道具，例如 onSuccess:

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

因此，当您的组件引发 onSuccess 时，商店将调度它。

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

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

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