Question

我无法理解如何通过combinereducers传递数组。

在调度操作后，我想将输入文本与数组连接。（状态d）

redux网站中的一个例子如下所示，在reducer中，我确实喜欢它。（checkD_E函数）

return Object.assign({}, state, {
    todos: [
      ...state.todos,
      {
        text: action.text,
        completed: false
       }
    ]
      })

d始终只更新为连接未定义和最后输入的文本。

首先＆＃34; undefined＆＃34;是因为初始状态未被读取。（const initialState variable）

    const ADD_TODO = 'ADD_TODO'
    const BDD_TODO = 'BDD_TODO'
    const DDD_TODO = 'DDD_TODO'
    const EDD_TODO = 'EDD_TODO'
    const {PropTypes} = React;
    const {createStore,combineReducers} = Redux;
    const { Provider, connect} = ReactRedux;
    let store = createStore(rootReducer)

    function changeA(text) {
      return { type: ADD_TODO, text }
    }
    function changeB(text) {
      return { type: BDD_TODO, text }
    }
    function changeD(text) {
      return { type: DDD_TODO, text }
    }
    function changeE(text) {
      return { type: EDD_TODO, text }
    }



    function checkA_B(state={},action){
      switch (action.type) {
        case ADD_TODO:
          return Object.assign({}, state.checkA_B, {a:action.text})      
        case BDD_TODO:
          return Object.assign({}, state.checkA_B, {b:action.text})   
        case DDD_TODO:
          return state
        default:
          return state
                     }
    }
    function checkD_E(state=[],action){
      switch (action.type) {
        case DDD_TODO:
          return Object.assign({}, state,{
        d: [...state.d,action.text]
          } )   
        case EDD_TODO:
          return Object.assign({}, state, {e:action.text}) 
        default:
          return state

    const initialState ={
      a:"aaa",b:"bbb",c:"ccc",d:[],e:"eee"
    }
    function rootReducer(state = initialState,action){
      return {
        checkA_B:checkA_B(state,action),
        checkD_E:checkD_E(state,action)
      }
    class Clock extends React.Component {
      constructor(props) {
        super(props);
        this.state = {a:props.a,b:props.b,d:props.d,e:props.e,inputText:props.inputText,onClick:props.onClick};
        this.onInput = this.onInput.bind(this)
        this.onSubmit = this.onSubmit.bind(this)
      }
      onInput(e){
        this.setState({inputText:e.target.value})   
      }
      onSubmit(e){
        e.preventDefault()
        this.state.onClick(this.state.inputText)
        this.setState({inputText:""})
      }
      render() {
        return (
          <div>
        <form onSubmit={this.onSubmit}>
          <input value={this.state.inputText} onChange={this.onInput} />
          <button type="submit">Add Todo</button>
        </form>
        <label>{console.log(this.props.d.map(x=>return x))}</label><label>{this.state.b}</label><label>{this.state.c}</label>
          </div>
        );
      }
    }
    Clock.propTypes = {

      inputText:PropTypes.string.isRequired,
      onClick:PropTypes.func.isRequired,
      a:PropTypes.string.isRequired,
      b:PropTypes.string.isRequired,
      d:PropTypes.array.isRequired,
      e:PropTypes.string.isRequired
    }
    function mapDispatchToProps(dispatch){
     return {onClick:(x)=>{
      dispatch(changeD(x))
     }
      }
    }
    function mapStateToProps(state,ownProps){
      return {d:state.checkD_E.d}
    }
    Clock = connect(mapStateToProps,mapDispatchToProps)(Clock)
    ReactDOM.render(
         <Provider store={store}><Clock /></Provider>,
      document.getElementById('root')
    );

index.html
    <div id="root">
      <!-- This element's contents will be replaced with your component. -->
    </div>

我想mapStatetoProps中的返回值必须改变。

但我不知道。

Answer 1

你至少有两个问题。

（1）你的rootReducer不会调用combineReducer。考虑类似的事情：

const rootReducer = combineReducers({
  checkA_B: checkA_B,
  checkD_E: checkD_E,
});

注意值是功能。

（2）您所在州的形状与您想要的减速器结构不符。它应该更接近：

const initialState = {
  checkA_B: { a: "aaa", b: "bbb" },
  checkD_E: { d: [], e: "eee" },
}

'initialState'的键匹配'combineReducers'参数的键。（我从initialState中省略了'c'，因为它不清楚它与哪个reducer关联。）

好消息是，你正确地在减速机上制作了一份状态副本。

这可能不是您的代码的每个问题，但它应该让您更接近。

如何更改阵列状态？

1 个答案: