Question

我正在实现一个应用程序，我从firebase获取一些数据。 firebase数据库不需要身份验证，我已经更改了公共访问规则。

但是，我有一个操作，使用firebase密钥从数据库中获取特定行：

动作

export function fetchClient(id) {
  return (dispatch) => {
     database.ref(`/clients/${id}`)
        .on('value', snapshot => {
            console.log(snapshot.val());
        dispatch({
            type: FETCH_CLIENT,
            payload: snapshot.val()
        });
     }); 
  };
}

Console.log显示已成功检索数据。

我的reducer也成功返回了有效负载：

减速器

const INITIAL_STATE = {}

export default function (state = INITIAL_STATE, action) {
 switch(action.type){
    case FETCH_CLIENTS:
        return action.payload;
    case FETCH_CLIENT:
        console.log(action.payload );
        return { ...state, [action.payload.id]: action.payload };
    case CREATE_CLIENT:
        return action.payload;
    default: 
        return state;
  }
}

然而，当我从上一页链接到该组件时，该组件接收到未定义的有效负载，并且当我刷新页面时显然为空。

组件

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchClient } from '../actions';
import { Link } from 'react-router-dom';

class ClientShow extends Component {

componentDidMount() {
  const { id } = this.props.match.params;
  console.log(this.props);
  this.props.fetchClient(id);
}
render(){
  const { myClient } = this.props;
  if (!myClient) {
    return (
        <div>
            <Link className="btn btn-danger" to="/" >Home</Link>
            <div>Loading...</div>
        </div>
    );
  }
  return (
    <div>
        <Link to="/"  className="btn btn-primary" >Home</Link>
        <h2>{myClient.name}</h2>
        <h4>The client is loaded... but undefined</h4>
    </div>
  ); 
 }
}

function mapStateToProps({ clients }, ownProps) {
  //console.log(ownProps.match.params.id);    
  return { myClient: clients[ownProps.match.params.id] };
}

export default connect(mapStateToProps, { fetchClient })(ClientShow);

URL中的键正确显示，并且从mapStateToProps中的console.log中我收到了正确的参数。

控制台日志

客户端console.log表单client_show组件

Answer 1

所以，我终于在这里解决了这个问题。

基本上，我没有将动作的firebase密钥发送到reducer，期望在action.payload.id中有id。

我现在在我传递firebase密钥的对象中添加了一个新元素：

export function fetchClient(id) {
  return (dispatch) => {
     database.ref(`/clients/${id}`)
        .on('value', snapshot => {
            console.log(snapshot.val());
        dispatch({
            type: FETCH_CLIENT,
            key: id, // Adding the Firebase KEY here
            payload: snapshot.val()
        });
     }); 
  };
}

然后，在我的减速机中：

case FETCH_CLIENT:
  return { ...state, [action.key]: action.payload };

Reducer正确返回有效负载，但组件将其视为未定义

1 个答案: