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不更新商店

回答

相關問題