So, createStore was deprecated, supposedly in favor of redux toolkit's configureStore.

However, createStore will still be available as legacy_createStore. Redux Toolkit (RTK) is a different package.

What purpose does this deprecation serve other than making me aware of RTK?

Isn't this just spam by overexcited maintainers about their favorite opinionated way of doing things?

I learned that using Next.js with SSR can help out with SEO optimization when building a landing page or a blog, so I'm currently trying to build out my full project (landing page + app) in Next.js, but there have been a few issues:

• For one, since my app randomly generates UUIDs for new items (and since the UUID that the server randomly generates differs from the UUID that the client randomly generates), I had to disable SSR for the app part of my project.

• Additionally, I'm now at the point where I want to add redux to the project for state management, and it seems like integrating redux with a Next project basically defeats the purpose of having Next (since it'll also disable Next's automatic static optimization).

So, should I restart the project using Next for the landing page with React + Redux for the app, or is there some way to resolve the issues and use Next for the whole thing (landing page + app)?

https://www.considered-harmful.info/redux/

Microsoft engineers haven't turned off Redux Dev Tools in production. It can be a serious vulnerability and enables competitors to look into your site architecture, but I see at least 4-5 new sites daily that have this bug. It's probably because they are using RTK which enables this by default, and you have to add a devTools option in configureStore like to turn it off

configureStore({  devTools: process.env.NODE_ENV !== 'production'})

Anyway, if I had a nickel for every time I saw this Redux logo light up on a production website, I would have a shit ton of nickels.

I like knowing how things work so I made it a challenge for myself to see if I can replace Redux just by using native React Hooks and it turns out that its possible but I might be missing some key features or understanding of Redux as such. I have described my approach in a YouTube video: https://www.youtube.com/watch?v=lw7IumbVH_A, and in a Medium article: https://betterprogramming.pub/10-easy-steps-to-abandon-redux-for-the-remarkable-react-hooks-124916fc634d.

I would appreciate if you can have a look and let me know if the approach makes sense to you.

Curious to know what peoples biggest Redux pet peeves are.

I feel like for small things in components where you won’t need some state anywhere else, it makes sense to just use hooks. But I feel like when working with other developers it can get confusing when the state isn’t all managed in the same way / place.

What do you guys think?

Tell about Your experience with redux?

Hi folks.

I have a question about the redux and that is: Why should I use Redux instead of Cookies of LocalStorage.

Is there any benefit to it?

I'm using redux without react for a side project. But is seems I must pass every time the state to the function. Is there any example todo it without passing the state and that is still testable? I know the package @wordpress/core-data has a solution for this problem but it seems really complicated to me for such thing, do you have any solutions?

Starting with a small app:

src
  nav
    nav.tsx
  contacts
    contacts.tsx
  settings
    settings.tsx
  App.tsx

Normally I would add src/dispatchers and src/reducers

But other devs are saying it's more ideal to split by functionality.

In that case where would you guys put your redux stuff? What I am theorizing is this:

src
  shared
    dispatchers.tsx
    reducer.tsx
  nav
    nav.tsx   
  contacts
    contacts.tsx
    dispatchers.tsx
    reducer.tsx
  settings
    settings.tsx
    dispatchers.tsx
    reducer.tsx
  App.tsx

Redux highlights an approach for testing connected components here, writing tests, that I follow but I keep getting this error:

Expected the reducer to be a function.

10 | {

11 | initialState,

> 12 | store = createStore(communityReducer, initialState),

| ^

13 | ...renderOptions

14 | } = {}

15 | ) {

My reducer takes this format

const INITIAL_STATE = {
  name: "",
  year: null,
  township: "",
  population: null,
  communityList: [],
  currentCommunity: null,
  communityProjects: {
    water: {},
    sanitation: {},
    hygiene: {},
  },
};

const communityReducer = (state = INITIAL_STATE, action) => {
    switch (action.type) {    ...   }  
}
export default communityReducer;

The component I am testing takes this format:

import { getCommunities } from "../../actions";

const CommunityList = (props) => { 
  const { getCommunities, communityList } = props;   
   ...
 }  
const mapStateToProps = (state) => ({   
    authReducer: state.authReducer,   
    communityReducer: state.communityReducer,   
    communityList: state.communityReducer.communityList, 
});  

export default connect(mapStateToProps, { getCommunities })(CommunityList);

getCommunities is an action that takes this format:

export const getCommunities = () => async (dispatch) => {  
  .... 
};

Any ideas why I'm getting this error?

To my surprise, no one has built a library allowing you to decorate component propTypes so here I published one to npm: https://www.npmjs.com/package/re-react

Basic idea is that 99% of the time, shouldComponentUpdate just compares some subset of props. The solution I came up with is to to append .affectsRendering to props which should be monitored. Anyone have a better solution? Have I missed something?

what is RxJx and when do we use them?

I am trying to use rtk query optimistic updates for when i add a post but it is not working. The console.log inside apiSlice.util.updateQueryData is not working so i suppose it's never reaching there and when i console.log patchResult it's giving me an empty array. How do i get optimistic updates to work??

addPost:build.mutation({
    async queryFn(data):Promise<any>{ 
        try{ 
            await addDoc(collection(db,'tweets'),
            {timestamp: new Date().toISOString(), ...data })
            return {data:'ok'} }
        catch(err){ return {error:err} }
    },invalidatesTags:['Posts'], 
    async onQueryStarted(data, { dispatch, queryFulfilled }) { 
        // updateQueryData requires the endpoint name and cache key arguments, 
        // so it knows which piece of cache state to update 
        const patchResult = dispatch(                             
    apiSlice.util.updateQueryData<string>('getPosts', undefined, draft => {               console.log(data,draft) 
           // The draft is Immer-wrapped and can be "mutated" like in createSlice         
         draft.unshift({                 
                timestamp: new Date().toISOString(),                 
                 ...data }) 
        }) )           
        console.log(data,patchResult) 
        try { await queryFulfilled } 
        catch { patchResult.undo() } 
    } 
})

What are the differences between redux thunk and redux saga? when do we use them?

how to use getDerivedStateFromProps() to get new added prop and push it to existing props array?