Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-reducer-ssr
Advanced tools
Readme
React Reducer SSR is a library that serves as an alternative to Redux for managing state in React applications. It leverages built-in React hooks and the context API, offering support for Server-Side Rendering (SSR), selectors, and async actions.
You can easily install react-reducer-ssr
using either Yarn or npm:
# Using Yarn
yarn add react-reducer-ssr
# Using npm
npm install react-reducer-ssr --save
To get started with react-reducer-ssr
, you need to import and configure it in your application. Here's a basic setup example:
import React from 'react';
import { ReducerProvider } from 'react-reducer-ssr';
import { reducers } from "./context";
function App() {
return (
<ReducerProvider reducer={reducers} initialState={{/* Your initial state */}}>
{/* Your application components */}
</ReducerProvider>
);
}
export default App;
react-reducer-ssr
allows you to create reducers to manage your application's state. Here's an example of creating a reducer:
import { TypedUseSelectorHook, useStateSelectorT, combineReducers } from 'react-reducer-ssr'
import { preferencesReducer } from './preferences.reducer'
import { usersReducer } from './users.reducer'
export const reducers = combineReducers({
preferences: preferencesReducer,
users: usersReducer
})
export type RootState = ReturnType<typeof reducers>
export const useStateSelector: TypedUseSelectorHook<RootState> = useStateSelectorT
import type { AnyAction } from "react-reducer-ssr";
export interface IUsersState {
userList?: string[]
}
export function usersReducer(draft: IUsersState, action: AnyAction): IUsersState {
switch (action.type) {
case 'GET_ALL_USERS': {
draft.userList = action.userList;
} break;
}
return draft
}
react-reducer-ssr
uses 'immer' internally, thus state mutation is allowed. No need to recreate a new object each time state changes.
Selectors help you access specific parts of your state. Here's how you can use selectors:
import { useStateSelector } from "./context";
const MyComponent = () => {
const users = useStateSelector(root => root.users);
return (
<div>
{/* Render your selected data */}
</div>
);
};
You can perform asynchronous actions with react-reducer-ssr
as well. Here's an example:
import { useDispatch } from 'react-reducer-ssr';
const MyComponent = () => {
const dispatch = useDispatch();
const fetchData = async () => {
await dispatch(usersActions.getUsers());
};
return (
<div>
<button onClick={fetchData}>Fetch Data</button>
</div>
);
};
export const usersActions = {
getUsers
}
async function getUsers(companyCode: string) {
try {
const response = await fetch("some_url");
const userList = await userList.json();
return { type: 'GET_ALL_USERS', userList }
}
catch(err) {
return { type: 'GET_ALL_USERS_FAILED', err }
}
}
react-reducer-ssr
offers support for Server-Side Rendering.
import { reducers } from "./context";
import { createServerStore, DispatchFunction } from 'react-reducer-ssr'
const store = createServerStore(reducers, {/*initial state here*/} as any);
...
await loadData(store.dispatch);
...
async function loadData(dispatch: DispatchFunction, cookies: any) {
await dispatch(userActions.getUsers());
}
For the complete example see react-ssr-ts-scss-rollup starter template.
We welcome contributions from the community! If you'd like to contribute to react-reducer-ssr
, please follow our contribution guidelines.
This project is licensed under the MIT License. For more information, see the LICENSE file.
For support and bug reports, please open an issue on GitHub.
Feel free to adapt and expand this template as needed to provide comprehensive documentation for your react-reducer-ssr
library. Don't forget to create separate documentation files for API reference, FAQs, and contributing guidelines if necessary.
FAQs
React reducer with server side rendering
The npm package react-reducer-ssr receives a total of 7 weekly downloads. As such, react-reducer-ssr popularity was classified as not popular.
We found that react-reducer-ssr demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.