自己的减速器中的空状态答案

【问题标题】：Empty state in own reducer自己的减速器中的空状态
【发布时间】：2017-07-12 08:12:06
【问题描述】：

我需要解决以下问题：用户更改选择输入 -> 对服务器的 ajax 请求 -> 响应是对象数组，例如 {type: "img", name: "background" 等} -> 根据此响应，我需要创建具有不同组件的字段数组（取决于类型）。我尝试编写自己的reducer来改变表单的状态，但是在我的reducer状态总是空的（

index.js

const rootReducer = combineReducers({
  landing: reducers,
  form: formReducer
})

const store = createStore(
  rootReducer,
  {},
  composeWithDevTools(applyMiddleware(thunk))
)

const form = document.getElementById('form')

ReactDOM.render(
  <Provider store={store}>
    <EditForm landing={landing} />
  </Provider>,
  form
)

EditForm.js

import * as formActions from './actions'

class EditForm extends React.Component {
  constructor(props) {
    super(props)
    let { landing, initializeLanding } = this.props
    initializeLanding(landing)
    this.handleSubmit = this.handleSubmit.bind(this)
    this.handleTemplateSelect = this.handleTemplateSelect.bind(this)
  }
  handleTemplateSelect(e) {
    this.props.actions.getVars(e.target.value)
  }
  handleSubmit(values) {
   ...
  }
  render() {
    return (
      <LandingForm
        onSubmit={this.handleSubmit}
        handleTemplateSelect={this.handleTemplateSelect}
      />
    )
  }
}
const mapDispatchToProps = dispatch => {
  return {
    initializeLanding: function(form) {
      dispatch(initialize('adminLandingForm', form))
    },

    actions: bindActionCreators(formActions, dispatch)
  }
}
const mapStateToProps = state => {
  return state.form.adminLandingForm
}

EditForm = reduxForm({
  form: 'adminLandingForm'
})(EditForm)
export default connect(mapStateToProps, mapDispatchToProps)(EditForm)

actions.js

const SET_VARS = 'admin-landing-from/SET_VARS'
export const getTracks = template => dispatch => {
  return fetch(url)
    .then(response => {
      return response.json()
    })
    .then(json => {
      dispatch({ type: SET_VARS, vars: json.data })
    })
}

reducers.js

const SET_VARS = 'admin-landing-from/SET_VARS'
const reducers = (state = {}, action) => {
  switch (action.type) {
    case SET_VARS:
    console.log(state) --> Always empty
      return {
        vars: action.vars
      }
    default:
      return state
  }
}

【问题讨论】：

标签： javascript reactjs redux redux-form

【解决方案1】：

试试

const reducers = (state = {}, action) => {
  switch (action.type) {
    case SET_VARS:
    console.log(state) --> Always empty
      return {
        ...state,
        vars: action.vars
      }
    default:
      return state
  }

}

【讨论】：

我试过了，但结果是一样的，这里是从redux devotools到触发这个动作的区别： { reducers: vars[ { "type": "img", "name" : "cover" }, { "type": "text", "name": "legend" } ]

【解决方案2】：

我认为，您的问题是您定义了 2 次 const SET_VARS 。只需尝试在 Reducer 中仅定义 1 次，然后将 SET_VARS 导入您的 Action。

因为你的 state default = {} => 你总是得到空对象:)

【讨论】：

我这样做了，但都一样