Redux-Crud：针对 RESTful CRUD 的 CRUD 功能库

介绍

Redux-Crud 是一个针对 RESTful CRUD 操作的功能库，它提供了一种简单的方式来管理你的应用程序中的数据。它使用 Redux 来管理状态，并提供了一组标准的 Action 和 Reducer 来处理 CRUD 操作。

Redux-Crud 支持多种数据源，包括 RESTful API、GraphQL 和本地存储等。它还提供了一些有用的功能，如数据分页、排序和筛选等。

Redux-Crud 的主要目标是使数据管理变得简单而直观，同时提供了一些有用的工具来处理常见的数据操作。

安装

你可以通过 NPM 来安装 Redux-Crud：

npm install redux-crud --save

如何使用

使用 Redux-Crud 很简单。首先，你需要在你的应用程序中引入它：

import { createStore, combineReducers } from 'redux';
import { reducers, actions } from 'redux-crud';

然后，你需要创建一个 Reducer，它将处理所有 CRUD 操作：

const rootReducer = combineReducers({
  ...reducers
});

const store = createStore(rootReducer);

现在，你可以使用 Redux-Crud 提供的 Action 来执行 CRUD 操作：

store.dispatch(actions.fetchAll('users'));
store.dispatch(actions.create('users', { name: 'John Doe' }));
store.dispatch(actions.update('users', { id: 1, name: 'Jane Doe' }));
store.dispatch(actions.delete('users', 1));

这里我们使用了 users 数据源来演示如何执行 CRUD 操作。你可以根据你的应用程序需要来定义自己的数据源。

示例

下面是一个完整的示例，它演示了如何使用 Redux-Crud 来管理一个用户列表：

// javascriptcn.com 代码示例
import React, { useEffect } from 'react';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import { Provider, useDispatch, useSelector } from 'react-redux';
import thunk from 'redux-thunk';
import { reducers, actions } from 'redux-crud';

const rootReducer = combineReducers({
  ...reducers
});

const store = createStore(rootReducer, applyMiddleware(thunk));

function App() {
  const dispatch = useDispatch();
  const users = useSelector(state => state.users);

  useEffect(() => {
    dispatch(actions.fetchAll('users'));
  }, []);

  const handleCreate = () => {
    dispatch(actions.create('users', { name: 'John Doe' }));
  };

  const handleUpdate = (id, name) => {
    dispatch(actions.update('users', { id, name }));
  };

  const handleDelete = id => {
    dispatch(actions.delete('users', id));
  };

  return (
    <div>
      <h1>Users</h1>
      <button onClick={handleCreate}>Create User</button>
      <ul>
        {users.items.map(user => (
          <li key={user.id}>
            {user.name} <button onClick={() => handleUpdate(user.id, 'Jane Doe')}>Update</button> <button onClick={() => handleDelete(user.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

function Root() {
  return (
    <Provider store={store}>
      <App />
    </Provider>
  );
}

export default Root;

在这个示例中，我们使用了 React 和 Redux-Thunk 来创建一个简单的用户列表。我们使用了 useSelector 来获取用户数据，并使用 useEffect 来在组件加载时获取所有用户。

我们还定义了 handleCreate、handleUpdate 和 handleDelete 函数来处理 CRUD 操作。这些函数分别使用了 actions.create、actions.update 和 actions.delete 来执行相应的操作。

总结

Redux-Crud 是一个非常有用的功能库，它提供了一种简单的方式来管理你的应用程序中的数据。它使用 Redux 来管理状态，并提供了一组标准的 Action 和 Reducer 来处理 CRUD 操作。如果你正在开发一个需要管理数据的应用程序，那么 Redux-Crud 绝对是值得一试的。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650d63db95b1f8cacd71aba2