Question

我正在制作react-redux应用，我想更新localState以及redux状态值。实际上，当我console.log更新操作但它无法更新状态值时。我把我的本地道具推到了firebase，它也有效，但它没有更新我的redux道具......

我的行动代码：

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

减速机代码：

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

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

App.js表示和输入字段值组件：

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)

我的最终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

以下可以帮助您，尝试它，因为我没有设置项目来编译它：

// 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);

您的reducer似乎还没有正确更新商店

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

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

Answer 2

首先，将redux视为应用程序中数据真实性的来源。
因此，与其从localstorage中获取一些数据，不如从redux存储中获取数据。
通过执行localstorage这件事，您就无法实现redux的目的。

第二，如果您需要跟踪用户状态（例如用户首选项），建议使用localstorage进行保存。
在React-Redux应用程序中，这些操作需要使用特殊的库来对副作用进行操作。最著名的两个是redux-saga和redux-thunk。
我建议您使用redux-saga，因为它可以使您的应用程序发挥更大的功能并帮助您避免回调地狱。同样，使用redux-thunk会破坏reducer的理念，reduceer应该是唯一的功能，没有任何副作用。

因此要发布到firebase，请在您的组件上分派一个动作，redux-saga将其采取行动，然后调用ajax函数。（如果需要，我可以给您代码示例，但在这里我谈论的是有关如何在react-redux应用程序中进行操作的理论）。

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

2 个答案: