Question

我正在使用ReactJs，并且正在尝试创建CRUD应用程序，该应用程序将能够删除，显示项目并将其添加到JSON文件。使用ReactJs我也使用Redux。我正在尝试学习如何一起使用ReactJs和Redux。

JSON文件将充当服务器。

这是我目前的结构：

index.js

['abcde', 'abcd', 'bcde', 'abc', 'bcd', 'cde', 'ab', 'bc', 'cd', 'de', 'a', 'b', 'c', 'd', 'e']

App.js

const logger = createLogger();
const store = createStore(combineReducers({roomReducer}), {}, applyMiddleware(logger));


ReactDOM.render(

  <Provider store = {store}>
  <BrowserRouter>
    <App/>
  </BrowserRouter>
  </Provider>,

  document.querySelector("#root")
);

减速机

index.js

export default class App extends React.Component {
    render() {
        return (
            <div>
            <Route path="/" exact component={LandingPage} /> 

          </div>
        )
    }
}

roomReducer.js

import {combineReducers} from 'redux';
import rooms from '../templates/rooms/Rooms';

const roomsReducer = combineReducers({
  rooms
});

export default roomsReducer;

动作

roomActions.js

const initialState = {
    rooms: []
  };

  export default function cardReducer(state = initialState, action) {
    switch (action.type){
      case 'ADD_ROOM':
        return {
          ...state,
          rooms: [
            ...state.rooms,
            action.rooms
          ]
        }
      case 'REMOVE_ROOM':

        //not sure how to do it

      case 'FETCH_ROOMS':
        return Object.assign({}, state, {
          cards: action.rooms
        });
      default:
        return state;
    }
  }

db.json

 export function fetchRooms(){
    return {
      type: 'FETCH_ROOMS'
    }
  }

  export function addRoom(){
    return {
      type: 'ADD_ROOM'
    }
  }

  export function removeRoom(id){
    return {
      type: 'REMOVE_ROOM',
      id: id
    }
  }

这段代码是我现在提出的。我已经在我的{ "cards": [ { "id": 0, "image": "http://placehold.it/400x300", "title": "CATEGORY 0", "numberGuests": "Placeholder 0", "type": "Single" }, { "image": "http://placehold.it/400x300", "title": "CATEGORY AAAA", "numberGuests": "Placeholder BBB", "type": "Single", "id": 6 }, { "image": "http://placehold.it/400x300", "title": "CATEGORY AAAA", "numberGuests": "Placeholder BBB", "type": "Single", "id": 7 } ] }文件中创建了商店，并将其连接到我的index.js组件

rooms.js

我希望我做对了。我不确定现在如何添加，删除或列出class Rooms extends React.Component{ render(){ return( <div> hello </div> ); } } const mapStateToProps = (state) => { return{ room: state.roomReducer }; }; export default connect(mapStateToProps)(Rooms);文件中已经存在的房间。

任何建议或指南都将受到高度赞赏。

Answer 1

let dbjson = {
 "cards": [
    {
      "id": 0,
      "image": "http://placehold.it/400x300",
      "title": "CATEGORY 0",
      "numberGuests": "Placeholder 0",
      "type": "Single"
    },
    {
      "image": "http://placehold.it/400x300",
      "title": "CATEGORY AAAA",
      "numberGuests": "Placeholder BBB",
      "type": "Single",
      "id": 6
    },
    {
      "image": "http://placehold.it/400x300",
      "title": "CATEGORY AAAA",
      "numberGuests": "Placeholder BBB",
      "type": "Single",
      "id": 7
    }
  ]
};
let state = {};
//You have cards in state
state['rooms'] = dbjson.cards;


// add room 
let roomItem = {
      "image": "http://placehold.it/400x300",
      "title": "CATEGORY AAAA",
      "numberGuests": "Placeholder BBB",
      "type": "Single",
      "id": 8
    };
let rooms = [...state.rooms,roomItem];
state['rooms'] = rooms;
//dispatch

// remove room by index 
let index = 1;
let roomstodelete = [...state.rooms];
roomstodelete.splice(1,index);
state['rooms'] = roomstodelete;
//dispatch

// remove room by id 
let roomstodeleteByid = [...state.rooms].filter(vl=>vl.id!==8);
state['rooms'] = roomstodeleteByid;
//dispatch

如何使用ReactJs显示，添加和删除JSON文件中的项目

1 个答案: