React + Redux不更新商店

我正在使用React和Redux进行电话列表，并且遇到问题。应该预料到的是：用户将他的数据放在模态表单中，当他点击Submit按钮时 - onClick函数触发器和数据分派到Redux存储区，然后从存储区转到localStorage，在那里存储所有数据。React + Redux不更新商店

问题：不是创建一个包含存储数据的对象的数组，而是创建了空数组。在下一次点击提交按钮后 - 第一次点击放入数据而不是空数组。继续下去。

与普通React setState有相同的问题。

代码：

应用：

import React from "react"; 
import { Input } from "../components/Input"; 
import { Table } from "../components/Table"; 
import { ButtonAdd } from "../components/ButtonAdd"; 
import { connect } from "react-redux"; 
import { setInput, setUser, setFormModalStatus, setSuccessModalStatus} from 
"../actions/dataActions"; 

class App extends React.Component { 

constructor(props) { 
    super(props); 
    this.handleSubmit = this.handleSubmit.bind(this); 
    this.openFormModal = this.openFormModal.bind(this); 
    this.closeFormModal = this.closeFormModal.bind(this); 
    this.openSuccessModal = this.openSuccessModal.bind(this); 
    this.closeSuccessModal = this.closeSuccessModal.bind(this); 
} 

openFormModal() { 
    this.props.setFormModalStatus(true); 
} 

closeFormModal() { 
    this.props.setFormModalStatus(false); 
} 

openSuccessModal() { 
    this.props.setSuccessModalStatus(true); 
} 

closeSuccessModal() { 
    this.props.setSuccessModalStatus(false); 
} 

handleSubmit(e) { 
    this.closeFormModal(); 
    this.openSuccessModal(); //this is for modals 

    const datas = this.props.form.input.values //{name: 'Rick', tel: 12345} 
    this.props.setUser(datas); //making dispatch with data 

    console.log(this.props.data.users); // [] - the issue 

    const testData = {name: Josh, tel: 54321}; 
    this.props.setUser(testData); 

    console.log(this.props.data.users); //[{name: 'Rick, tel: 12345}] 

    e.preventDefault(); 
    this.props.form.input.values = ''; 
} 
render() { 
    return (
     <div className="container"> 
      <div className="row"> 
       <div className="col-xs-12 col-md-10 col-md-offset-1"> 
        <div className="box"> 
         <Input input={this.props.input}/> 
         <ButtonAdd 
          formModalStatus= 
{this.props.data.formModalStatus} 
          successModalStatus= 
{this.props.data.successModalStatus} 
          openFormModal={this.openFormModal} 
          closeFormModal={this.closeFormModal} 
          closeSuccessModal={this.closeSuccessModal} 
          handleSubmit={this.handleSubmit} 
         /> 
        </div> 
        <Table /> 
       </div> 
      </div> 
     </div> 
     ); 
    } 
} 

const mapStateToProps = (state) => { 
    return { 
     data: state.data, 
     form: state.form 
    }; 
    }; 

const mapDispatchToProps = (dispatch) => { 
    return { 
     setInput: (input) => { 
      dispatch(setInput(input)); 
     }, 
     setUser: (user) => { 
      dispatch(setUser(user)); 
     }, 
     setFormModalStatus: (boolean) => { 
      dispatch(setFormModalStatus(boolean)); 
     }, 
     setSuccessModalStatus: (boolean) => { 
      dispatch(setSuccessModalStatus(boolean)); 
     } 
    }; 
}; 

export default connect(mapStateToProps, mapDispatchToProps)(App);

减速机：

const dataReducer = (state = { 
    input: "", 
    users: [], 
    formModalStatus: false, 
    successModalStatus: false 
}, action) => { 
    switch (action.type) { 
     case "SET_INPUT": 
      state = { 
       ...state, 
       input: action.payload 
      }; 
      break; 
     case "SET_USER": 
      state = { 
       ...state, 
       users: [...state.users, action.payload] 
      }; 
      break; 
     case "SET_FORM_MODAL_STATUS": 
      state = { 
       ...state, 
       formModalStatus: action.payload 
      } 
     case "SET_SUCCESS_MODAL_STATUS": 
      state = { 
       ...state, 
       successModalStatus: action.payload 
      } 
    } 
    return state; 
}; 

export default dataReducer;

Appropriane行动：

export function setUser(user) { 
    return { 
     type: "SET_USER", 
     payload: user 
    }; 
}

来源

2017-10-12 Constantine Solovei

如果你能在WebpackBin什么提供工作示例，那个ld帮助更好地调试问题。

从我的经验来看，这通常发生在状态发生变异时。你可以尝试使用你的减速以下格式：

state = { 
      state.set('users', [...state.users, action.payload]) 
     };

现有的功能变异的存在状态在state=...

state = { 
      ...state, 
      users: [...state.users, action.payload] 
     };

PS：还有，你少在最后两个动作break声明你的减速器中的情况。而你的default案例

来源

2017-10-12 13:13:39 nikjohn

感谢您的回答。当我尝试你的变体 - 控制台@ state.set中的错误不是一个函数。我已经尝试了许多减速器不可变回报的变体，现在它就像珍娜拉贾尼在这里写下的那样。可能会尝试在Webpackbin上提供一个工作示例，但这需要一定的时间。 PS：我试过只使用React状态，但是遇到了React setState（）这个问题，然后在React + Redux中重写了所有内容，并且问题消失了。然后我不喜欢自举模态，并使用React模态并面对最初的问题。 –

你不应该直接在React或Redux中改变状态。使用Redux时，您希望始终返回一个新对象来替换之前的状态。

也许尝试这样的事情呢？

switch (action.type) { 
    case 'SET_INPUT': 
     return { 
      ...state, 
      input: action.payload 
     }; 
    case 'SET_USER': 
     return { 
      ...state, 
      users: [...state.users, action.payload] 
     }; 
    case 'SET_FORM_MODAL_STATUS': 
     return { 
      ...state, 
      formModalStatus: action.payload 
     }; 
    case 'SET_SUCCESS_MODAL_STATUS': 
     return { 
      ...state, 
      successModalStatus: action.payload 
     }; 
    default: 
     return state; 
}

来源

2017-10-12 16:55:55

React + Redux不更新商店

回答

相关问题