同时更新本地状态和redux存储值？

Question

I'm making a react-redux app and I want to update localState as well as redux state values. Actually when I console.log it updates action but it can't update the state values. I'm pushing my local props to firebase and it also worked but it doesn't update my redux props.....

My code for actions:

export const addName = action => {
  return{
    type:'ADD_ENTRY',
    ...action
  };
};

Code for the Reducers:

export const AddReducer = (state = [], action) =>{

  switch (action.type) {
    case 'ADD_ENTRY':
      return [
        ...state,
        {
          firstName:action.firstName,
          passWord:action.passWord
        }
      ]
    default:
      return state;
  }
};

App.js presentational and input field value component:

import React,{Component} from "react";
import {connect} from "react-redux";
import {bindActionCreators} from "redux";
import * as action from './action';
let firebase = require('firebase')
var config = {
    apiKey: "my_hidden_API_key",
    authDomain: "myauthdomain.firebaseapp.com",
    databaseURL: "https://myauthdomain.firebaseio.com",
    projectId: "myApp",
    storageBucket: "myApp.appspot.com",
    messagingSenderId: "382483"
  };
  firebase.initializeApp(config);
class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      uname: '',
      pass: ''
    };
  }
  inputData = event => {
    this.setState({
      [event.target.name]:event.target.value
    });
  }
  submitData = event => {
    event.preventDefault();
    firebase
     .database()
     .ref('Entry/'+this.state.uname)
     .set({
       uname:this.state.uname,
       pass:this.state.pass
     });
     this.props.action.addName({
       userName:this.state.uname,
       passWord:this.state.pass
     });
  }
  render(){
    return(
      <div>
        <form onSubmit={this.submitData}>
          UserName:
          <input type="text" name="uname" onChange={this.inputData}/>
          Password:
          <input type="text" name="pass" onChange={this.inputData}/>
          <button type="submit">Submit</button>
        </form>
      </div>
    );
  }
}
function mapStateToProps(state){
  return {
    userName : state.userName,
    passWord : state.passWord
  };
};
function mapDispatchToProps(dispatch) {
  return{
    action: bindActionCreators(action,dispatch)
  };
};
export default connect(mapStateToProps,mapDispatchToProps)(App)

My Final index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {Provider} from "react-redux";
import {AddReducer} from './reducers/name';
import {createStore} from "redux";
import registerServiceWorker from './registerServiceWorker';
let store = createStore(AddReducer)
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root'));
registerServiceWorker();

Answer 1

Following could help you, try it as I didnt setup project to compile this:

// cut for brevity
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            uname: props.userName || '',
            pass: props.passWord || ''
        };
    }
    inputData = event => {
        this.setState({
            [event.target.name]: event.target.value
        });
    }
    submitData = event => {
        event.preventDefault();
        const { action } = this.props;
        const { uname, pass } = this.state;
        firebase
            .database()
            .ref('Entry/' + uname)
            .set({
                uname: uname,
                pass: pass
            }, error => {
                if(!error) {
                    // OK - dispatch action
                    action.addName({
                        userName: uname,
                        passWord: pass
                    });
                } else {
                    // TODO: handle failure
                }
            });
    }
    // cut for brevity
}
function mapStateToProps = (state, props) => ({
        userName: state.userName,
        passWord: state.passWord
});
// cut for brevity
export default connect(mapStateToProps, mapDispatchToProps)(App);

Also seems that your reducer is not updating store correctly

export const AddReducer = (state = {}, action) =>{

  switch (action.type) {
    case 'ADD_ENTRY':
      return {
        ...state,
          userName:action.userName,
          passWord:action.passWord
        }
    default:
      return state;
  }
};

Answer 2

First of all, treat redux as your source of truth of your data in your application.
So instead of fetching some data from localstorage , do so from the redux store.
By doing the localstorage thing, you are defeating the purpose of redux.

Secondly, if you need to keep track of a user state, like a user preference, localstorage is recommended storage to save it.
In a React-Redux app these actions where you need to use special libraries to take action on side effects. The two most notable ones are redux-saga and redux-thunk .
I do recommend redux-saga as it makes your app more functional and helps you avoid callback hell. Also, using redux-thunk defeats the philosophy of reducer, which should be sole functions without any side-effects.

So to post to firebase, dispatch an action on your component, which redux-saga takes it, then calls an ajax function. (I can give you code samples if you want but here I'm talking about theories on how you should do it in a react-redux app).