更新点 Redux React Native

Question

我正在尝试从 Firebase 加载点以便在屏幕上显示它我正在使用 Redux，因为点数可以更新，但我不能将 this.props.Points.updatePoint 放入 Firebase 请求

如何更新？

Home.js :

class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
     
    };
  }

  componentDidMount = async () => {
   const pointsRef=firebase.database().ref("Users").child(firebase.auth().currentUser.uid).orderByChild("Points").once('value',function(snapshot){
    const Points=snapshot.val().Points
    
   });
   this.props.Points.updatePoints(Points)


render(){
return(
     <Text>{this.props.Points}</Text>
)}
}



const mapStateToProps = (state) => {
  return {
    Points:state.Points};
};

const mapDispatchToProps = (dispatch) => {
  return {
    updatePoints:(Points)=>dispatch({ type: "UPDATE_POINTS", payload: Points }),
  };
};

PointReducer.js :

const initialState = {
    Points: 0,

  };
  
  const Points = (state = initialState, action) => {
    switch (action.type) {
        case "UPDATE_POINTS":
            return {
            ...state,
            Points: action.payload,
        };
        default:
            return state;
    }
  };
  
export default Points;

Answer 1

你的方法是正确的。问题实际上在于您尝试访问 mapDispatchToProps 中的 updatePoints 函数的方式以及您在运行语句中的位置。

class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount = async () => {
    const pointsRef = firebase
      .database()
      .ref("Users")
      .child(firebase.auth().currentUser.uid)
      .orderByChild("Points")
      .once("value", (snapshot) => {
        const Points = snapshot.val().Points;
        this.props.updatePoints(Points); // You can directly access to `updatePoints` using prop object.
      }); // convert this function to an arrow function. It will fix `this` related issues.
  };

  render() {
    return <Text>{this.props.Points}</Text>;
  }
}

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

const mapDispatchToProps = (dispatch) => {
  return {
    updatePoints: (Points) =>
      dispatch({ type: "UPDATE_POINTS", payload: Points }),
  };
};

如果您需要进一步的支持，请告诉我。

更新点 Redux React Native

Update points Redux React Native

react-native

redux

react-redux

reducers

redux-reducers