sergeysova / redux-symbiote Goto Github PK
View Code? Open in Web Editor NEWCreate actions and reducer without pain
Home Page: npmjs.com/redux-symbiote
License: MIT License
Create actions and reducer without pain
Home Page: npmjs.com/redux-symbiote
License: MIT License
When user logs out, I want to clear the store with one RESET_STORE action.
It's easy to achieve with pure Redux.
Is there an elegant way to reset the whole state to initial values with one action, when using redux-symbiote with namespaces?
Current TypeScript implementation is not convenient because I have to describe the actions 2 times: the type and the implementation. Moreover, the createSymbiote
type doesn't fully check that the actions type and implementation match.
// 1st actions description
interface Actions {
foo(): Action;
bar(arg: string): Action
}
// 2nd actions description
const symbiotes = {
foo(state: State) {
return {...state, value: 'foo'};
},
bar(state: State, value: number) { // The argument type mismatch is not checked
return {...state, value: `bar ${value}`};
}
};
const {actions, reducer} = createSymbiote<State, Actions>({value: 'Hi'}, symbiotes);
The single source of truth principle is broken.
I've made a draft of typing for createSymbiote
that solves the problem. The function type derives the returned actions type from the input symbiotes type automagically:
export interface NamespaceOptions<State> {
namespace?: string
defaultReducer?: (prevState: State, action: Action) => State
separator?: string
}
export type Symbiote<State> = (state: State, ...payload: any[]) => State
export type Reducer<State> = (state: State, action: Action) => State
export type Actions<Symbiotes> = {
[Key in keyof Symbiotes]: Symbiotes[Key] extends Function
? ActionCreator<Symbiotes[Key]>
: Actions<Symbiotes[Key]>
}
export interface Action<Payload = any> {
type: string
payload?: Payload
}
// Inspired by the built-in Parameters type
type ParametersFromSecond<T> = T extends (_: any, ...args: infer P) => any ? P : never;
type ActionCreator<Symbiote> = (...args: ParametersFromSecond<Symbiote>) => Action;
export function createSymbiote<State, Symbiotes>(
initialState: State,
actionsConfig: Symbiotes,
namespaceOptions?: string | NamespaceOptions<State>,
): {
actions: Actions<Symbiotes>
reducer: Reducer<State>
}
The example can be converted with these types:
// Only 1 actions description
const symbiotes = {
foo(state: State) {
return {...state, value: 'foo'};
},
bar(state: State, value: number) {
return {...state, value: `bar ${value}`};
}
};
const {actions, reducer} = createSymbiote({value: 'Hi'}, symbiotes);
actions.bar('cocktail'); // TS error, a number is expected
I can make a PR if you agree. It'll be a breaking change for the typing.
IssueHunt has been backed by the following sponsors. Become a sponsor
https://codesandbox.io/s/43m0nvxk34
Steps to reproduce:
npm install
npm run build
Creating an optimized production build...
Failed to compile.
Failed to minify the code from this file:
./node_modules/redux-symbiote/lib/index.js:2
Read more here: http://bit.ly/2tRViJ9
Hello. This lib is great! But, I want use it with TS app. Do you have plans about adding TS support?
Many fetch
state in a flat state object
Add support fetch
in nested state
For example
const initial = {
fetching: {
main: initialFetching,
apply: initialFetching,
},
}
const symbiotes = {
fetchNewsHandler: createFetching("fetching.main"),
applyNewsHandler: createFetching("fetching.apply"),
}
Hello! Is there a way to configure this behavior?
https://github.com/sergeysova/redux-symbiote/blob/master/README.md
from
<img src="https://raw.githubusercontent.com/RusTorg/redux-symbiote/master/assets/logo.svg?sanitize=true" width="80" />
to
<img src="https://raw.githubusercontent.com/sergeysova/redux-symbiote/master/assets/logo.svg?sanitize=true" width="80" />
Hello, can I define payloadCreator or metaCreator?
upd
As I can see, I can't
Hi ! First of all, thanks for all the work you did on redux-symbiote. It's a wonderful lib, writing redux-related code has never been so easy.
I'm developing 2 apps in React Native with Expo, and of course, redux-symbiote.
I upgraded redux-symbiote
version from v3.0.2
to v3.1.0
and had this error since :
Your browser does not have secure random generator. If you don’t need unpredictable IDs, you can use nanoid/non-secure.
I tried replacing const nanoid = require("nanoid")
with const nanoid = require("nanoid/non-secure")
in src/index.js
but it didn't do the trick.
My workaround was to rollback to v3.0.2
to get both my apps working again.
IssueHunt has been backed by the following sponsors. Become a sponsor
How pass meta key to action?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.