score:0
i made some changes in your code to fix issues. here is the updated code.
// reducerfactory.ts
export interface actionhandler<s, a> {
[actiontype: string]: genericreducer<s, a>
}
export type genericreducer<s, a> = (state: s, action: a) => s
const reducerfactory = <s, a extends { type: string }>(
initialstate: s,
handlers: actionhandler<s, a>
): genericreducer<s, a> => {
return (state: s = initialstate, action: a): s => handlers[action.type]?.(state, action) || state
}
export default reducerfactory
// actions.ts
export enum loadingactions {
add_loading_token = 'add_loading_token',
remove_loading_token_with_key = 'remove_loading_token_with_key',
}
export interface addloadingtokenaction {
type: typeof loadingactions.add_loading_token
payload: loadingtoken
}
export interface removeloadingtokenwithkeyaction {
type: typeof loadingactions.remove_loading_token_with_key
payload: loadingtoken
}
type actions = addloadingtokenaction | removeloadingtokenwithkeyaction
// handler.addloadingtoken.ts
const addloadingtoken: genericreducer<loadingstate, actions> = (state, action:actions): loadingstate => {
return {
...state,
loadingtokens: [...state.loadingtokens, action.payload],
}
}
export { addloadingtoken }
// handler.removeloadingtokenwithkey.ts
const removeloadingtokenwithkey: genericreducer<loadingstate, actions> = (
state,
action: actions
) => ({
...state,
loadingtokens: [...state.loadingtokens].filter(loadingtoken => loadingtoken.key !== action.payload.key),
})
export { removeloadingtokenwithkey }
// index.ts
export interface loadingtoken {
key: string
scope: string
message: string
}
export interface loadingstate {
loadingtokens: loadingtoken[]
}
const initialloadingstate: loadingstate = {
loadingtokens: [],
}
const loadinghandlers: actionhandler<loadingstate, actions> = {
[loadingactions.add_loading_token]: addloadingtoken,
[loadingactions.remove_loading_token_with_key]: removeloadingtokenwithkey,
}
const loadingreducer = reducerfactory<loadingstate, actions>(initialloadingstate, loadinghandlers)
let me know, if you still face any problem.
as suggested by @phry using redux-toolkit will make your life lot easier. the article you linked was written in mid 2019. things have changed a lot since then. take a look at these new articles to make your life easier.
Source: stackoverflow.com
Related Query
- Union type assignment issue with React/Redux/Typescript setup
- Property does not exist on type error with Union Types in Typescript Reac + Redux
- React Redux connect is not assignable to type '() => void' with typescript
- TypeScript generics: Props with union type in React
- Issue with setup and run Electron + React + Typescript + Webpack application
- How to add item in redux with dictionary type in react typescript
- Union type doesn't allow if statement with Typescript and React
- React Typescript Context - issue with type
- TypeScript error "not assignable to type 'IntrinsicAttributes'" for React component with extended discriminated union
- Redux toolkit typescript type issue with next js and next-redux-wrapper
- Compilation error with React Redux based on a union type with undefined
- React HOC TypeScript get rid of any type with Redux connect
- Typescript literal type union issue when type become more specific in react children
- React with Typescript - Type { } is missing the following properties from type
- TS2339: Property 'focus' does not exist on type '{}'. with React typescript
- React and typescript with webpack typing issue
- How do you correctly use React.lazy() in Typescript to import a react component with a generic type parameter?
- Typing redux forms v7 with TypeScript and React
- React with TypeScript - Type {...} is not assignable to type 'Readonly<S>'
- React Typescript Type Cast Issue - Parsing Error: Missing Semicolon
- React + Typescript : TypeScript error: Type 'string' has no properties in common with type 'CSSProperties'
- Connecting a component with OwnProps using react redux and typescript in the .NET Core 2.0 reactredux template project
- React with typescript - type safety with setState
- Creating reusable Button Component with React and Typescript with not assignable type error
- Is it possible to type a React function component with TypeScript without using arrow functions?
- React Custom Hook with Typescript Type error "Property 'x' does not exist on type 'interface | (({ target }: any) => void)'.ts(2339)"
- React lazy with TypeScript and Redux
- React Bootstrap Typeahead AsyncTypehead synchronous issue with Redux
- React observable epic with Redux Toolkit and Typescript
- How to type a Typescript React Component that accepts a Context with a super-set of properties
More Query from same tag
- Reactjs - TypeError: Cannot read property 'value' of null
- Obtaining the react-calendar value once it is passed to another component
- Where/how do I trigger my re-render after CRUD operation?
- Tried to get frame for out of range index NaN (realtime database)
- Mapping over an array starting from the next index
- Authorization with respect to React Router
- React Node Unable to pass cookie to the browser (crocs error)
- How to redirect to another page after login in react
- Reaching nested objects with Object.keys in React
- ReactJS: onClick change element
- How to update my react state with active tab menu name so it can pass on to the endpoint call?
- remove padding of the textbox which comes from material ui
- Count the number of threads on a parent comment in ReactJS
- How can I disappear the Dialog once log out has been performed?
- REACT - .map make props as undefined
- 'BUILD_PATH' is not recognized as an internal or external command
- React Router dom change history without changing the component
- Ant design change default colors
- Unhandled Rejection (Error): The dtype of dict['ImageTensor'] provided in model.execute(dict) must be int32, but was float32
- react-router v6: get path pattern for current route
- React enable drag events on not draggable element
- set default value for select menu from mongodb
- React Js, How can I save multiple data in onClick?
- How to access leaflet functionality with buttons that are not child components of a <MapContainer> with React Leaflet?
- WebAPI CORS Policy when Creating new record
- Change buton color when get axios response
- Google Structured Data Tool don't read my React Site content
- how to fetch local api in react.js
- How to compare numbers and return the highest?
- Handle multiple input values with React Redux Toolkit