Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/icemimosa/redux-creator
Redux Action and Reducer creator.
https://github.com/icemimosa/redux-creator
creator redux redux-create redux-creator redux-middleware
Last synced: about 12 hours ago
JSON representation
Redux Action and Reducer creator.
- Host: GitHub
- URL: https://github.com/icemimosa/redux-creator
- Owner: IceMimosa
- License: mit
- Created: 2018-06-03T12:12:40.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T00:00:50.000Z (about 2 years ago)
- Last Synced: 2024-12-22T19:08:23.652Z (19 days ago)
- Topics: creator, redux, redux-create, redux-creator, redux-middleware
- Language: JavaScript
- Size: 576 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Redux Action and Reducer creator.
[](https://www.npmjs.com/package/redux-all-creator)
## 1. Install
```sh
npm install --save redux-all-creator
```
* test
```sh
$ yarn
$ yarn test
```
## 2. Usage
```js
import * as ReduxCreator from 'redux-all-creator';
```
### 2.1 Create Action and Reducer
```js
// hello.js
export default ReduxCreator.create({
namespace: 'hello',
actions: {
hello: ReduxCreator.createAction((data) => {
return `Hello ${data}`;
})
},
reducers: {
hello: ReduxCreator.createReducer((on, actions) => {
on(actions.hello).completed((state, action) => {
return action.payload;
})
}, '')
}
});
// or pure hello.js
export default ReduxCreator.create({
namespace: 'hello',
actions: {
hello: (data) => {
return `Hello ${data}`;
}
},
reducers: {
hello: (on, actions) => {
on(actions.hello).completed((state, action) => {
return action.payload;
})
} // initialState is {}
}
});
```
### 2.2 Connect all creators
Connect all creators and get reducers object.
```js
import * as ReduxCreator from 'redux-all-creator';
import HelloCreator from './examples/hello';
// create connector
const connector = ReduxCreator.connect(HelloCreator, ...);
// create redux store
const middlewares = [];
const store = Redux.createStore(
Redux.combineReducers(connector.getReducers()),
Redux.applyMiddleware(...middlewares)
);
// jest test
it('hello world', () => {
const data = 'Redux Creator';
store.dispatch(HelloCreator.hello(data))
// hello is reduce key
expect(store.getState().hello).toBe(`Hello ${data}`);
})
```
* [More Examples](https://github.com/IceMimosa/redux-creator-test) OR `__tests__ directory`.
## 3. FetchStatus Middleware
You can get status(**true** or **false**) before and after Fetch(Promise) action. You should also use [redux-promise](https://github.com/redux-utilities/redux-promise).
* import middleware
```js
import promiseMiddleware from 'redux-promise';
import * as ReduxCreator from 'redux-all-creator';
const middlewares = [ ReduxCreator.fetchStatusMiddleware, promiseMiddleware ];
```
* create action and reducer
```js
// promise.js
// delay方法
const delay = (time) => (result) => new Promise(resolve => setTimeout(() => resolve(result), time));
// !!! important: add fetch property to true
export default ReduxCreator.create({
namespace: 'TestPromise',
actions: {
promiseStatus: ReduxCreator.createAction((id) => {
return Promise.resolve({ body: `Promise Status ${id}` }).then(delay(2000)).then(res => res.body)
}, { fetch: true })
},
reducers: {
promise: ReduxCreator.createReducer((on, actions) => {
on(actions.promiseStatus).completed((state, action) => {
return action.payload;
});
}, {})
}
});
```
* get fetch status
```js
import PromiseCreator from './example/promise';
it('test promise status', (done) => {
const id = 1;
store.dispatch(PromiseCreator.promiseStatus(id))
.then(it => {
const state = store.getState();
expect(state.promise).toBe(`Promise Status ${id}`);
// fetch end
const fetchStatus = ReduxCreator.getFetchStatus(state, PromiseCreator.promiseStatus);
expect(fetchStatus).toBe(false);
done();
});
// fetch start
const state = store.getState();
const fetchStatus = ReduxCreator.getFetchStatus(state, PromiseCreator.promiseStatus)
expect(fetchStatus).toBe(true);
})
```
## Some examples
* [IceMimosa/react-antd-example](https://github.com/IceMimosa/react-antd-example)
## Todo
* [ ] Promise data cache
* [ ] Connect with React