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

我的问题是：

发送成功后如何将buttonText的状态从'textbefore'变为'textafter'？
我有一个resetForm函数，redux架构哪里可以调用？

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

如何处理和支持错误？

Answer 1

Redux 的意义在于让状态管理 OUTSIDE 你的组件，在 STORE 中（它在哪里？）。

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

由于使用了 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 将根据操作对象中给出的指令和 return 一个新状态进行操作。

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 将状态作为参数注入，returns 一个将映射到道具的对象。

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

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

然后是 mapDispatchToProps，它将商店的调度函数作为参数注入，然后在回调函数中使用。您的组件可能期望回调函数作为 props，例如 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

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

Redux 在哪里改变状态？

Where change state in Redux?

action

reducers

reactjs

redux