javascript - 自己的 reducer 中的空状态

Question

我需要解决以下问题: 用户更改选择输入 ->对服务器的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 })
    })
}

reducer .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
  }
}

Answer 1

尝试

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

}