多个记录在反应应用程序的firebase中以相同的id保存

时间:2017-07-18 17:26:31

标签: firebase firebase-realtime-database react-redux observable

我目前正在学习react-redux并开发一个简单的应用程序。当我要创建新类别时,记录会保存与下面相同的category_id。

categories
 -KpKwhwyuXtq1uFkE56K
    category_id: "1"
    desc: "title 1 desc"
    title: "title 1"
 -KpL2mWBrzP_36wrDQs6
   category_id: "1"
   desc: "title 2 desc"
   title: "title 2"
 -KpLHaNkSNbqimTJ59Mi
   category_id: "1"
   desc: "title 3 desc"
   title: "title 3"

这里category_id需要是唯一的。我使用了以下解决方案,但无法获得唯一的category_id。

CategoryNew.jsx:

handleUpdate(event) {
    event.preventDefault();
    var title = this.title.value.trim();
    var desc = this.desc.value.trim();

    this.props.categoryUpdate({
      title: title,
      desc: desc
    }, this.props.match.params.category_id);
    this.title.value = "";
    this.desc.value = "";

    setTimeout(function () { window.location.replace("/"); }, 10)
  }
render() {
    const { categoriesId, categories } = this.props;
    var categoriesArr = categoriesId.map(id => (Object.assign({}, categories[id], {category_id: id})))
    console.log('Category ids array', categoriesArr);

    var category_id = this.state.category_id;
    var title = this.props.categories.title;
    var desc = this.props.categories.desc;

        return (
      <Panel>
        <form onSubmit={ category_id ? this.handleUpdate.bind(this) : this.handleSubmit.bind(this)}>
          <h3>{category_id ? "Edit category" : "Create a New Category"}</h3>
          <FormGroup controlId="formControlsText">
            <ControlLabel>Title</ControlLabel>
            <FormControl
              type="text"
              inputRef={ref => {
                this.title = ref;
              }}
              placeholder="Enter title"
              defaultValue={title}
            />
          </FormGroup>
          <FormGroup controlId="formControlsTextarea">
            <ControlLabel>Description</ControlLabel>
            <FormControl
              type="textarea"
              defaultValue={desc}
              inputRef={ref => {
                this.desc = ref;
              }}
              placeholder="Enter description"
            />
          </FormGroup>
          <Button className="btn-primary" type="submit">
            {category_id ? "Update" : "Submit"}
          </Button>
          <span>  </span>
          <Link to="/" className="btn btn-danger">Cancel </Link>
        </form>
      </Panel>
        );
    }
}
unction mapStateToProps(state) {
  return {
    categoriesId: state.categoriesState.ids,
    categories: state.categoriesState.categories,
    //categories: state.categoriesState.selectedCategory,
    formloaded: state.postsState.formloaded
  };
}  

export default connect(mapStateToProps, { 
  newCategoryCreate, 
  selectedCategory,
  categoryUpdate
})(CategoriesNew);

reducer.jsx:

   import * as actionTypes from './actionTypes'; 
    const INITIAL_STATE = {
      ids: [],
      categories: {}, 
      selected_category: {},
      isFetchingCategories: false,
      isFetchingSingleCategories: false,
      formloaded: false
    };

  case actionTypes.CREATE_CATEGORIES:
      return { ...state };
  case actionTypes.CREATE_CATEGORY_SUCCESS:
      return { ...state,formloaded: true };

epics.jsx:

import AdminService from '../../../app/admin/services/AdminService';
import * as actionTypes from './actionTypes';
import * as categoryActions from './actions';

export const newCategoryCreate = (action$,{ getJSON } ) => {
  return action$.ofType(actionTypes.CREATE_CATEGORIES)
    .map( action => action.payload)
    .switchMap((category) => AdminService.categorySubmit(category))
    .map(category => categoryActions.fetchCategoriesSuccess(Object.values(category)))   
}

actions.jsx:

import * as actionTypes from './actionTypes';

export function newCategoryCreate(props) {
  return {
    type: actionTypes.CREATE_CATEGORIES,
    payload: props
  };
}
export function newCategoryCreateSuccess(props) {
  return {
    type: actionTypes.CREATE_CATEGORY_SUCCESS,
    payload: props
  };
}

AdminService.jsx:

 static categorySubmit(category){
    var firebaseRef = firebase.database().ref('categories');
    firebaseRef.push(category);
    this.getCategories();
    return Observable.of(category);
  }

请建议我哪里出错了以及如何解决这个问题。提前谢谢。

0 个答案:

没有答案