score:7
the short answer is that you're not passing the initial state quite right. the first argument to the connect
function for the react redux bindings is mapstatetoprops
. the point of this function is to take the state that already exists in your app and map it to props for your component. what you're doing in your starterinfo
function is kind of just hard-coding what the state is for your component. because you're returning a plain object react doesn't really know the difference so it works just fine, but redux doesn't yet know about your app state.
instead, what you should do is provide your initial state directly to the reducers, like this:
const intialstyleitemsstate = [
{
pk: 31,
order: 1,
label: 'caption text color',
css_identifier: '.caption-text',
css_attribute: 'color',
css_value: '#ffffff'
},
{
pk:23,
order: 2,
label: 'caption link color',
css_identifier: '.caption-link',
css_attribute: 'color',
css_value: '#fefefe'
}
];
function styleitems(state = intialstyleitemsstate, action){ ...
and eventually, because you're splitting your reducers up you'll need to combine them back together again with redux's combinereducers
utility, provide that root reducer to your store and go from there.
score:1
you can also pass the initial state using the redux function createstore that take as argument createstore(reducer, [initialstate]) http://rackt.org/redux/docs/api/createstore.html
let’s say you have two reducers
change_css(state = {}, action)
function styleitems(state = [], action)
if you use comibnereducer to initialize your state
var reducer = combinereducers({
css: change_css,
items: styleitems
})
now
var store = createstore(reducer)
console.log(store.getstate())
your store will contain { css: {}, items: [] }
now if you want to initialize the state you can pass the initial state as the second argument of the createstore function.
createstore(reducer, {css:{some properties},items:[{name:"obj1"},{name:"obj2"},{name:"obj3"}]})
now you store will contain the initial state. {css:{some properties,items:[{name:"obj1"},{name:"obj2"},{name:"obj3"}]}
you can feed this state from server for example and set it as initial state of your application
Source: stackoverflow.com
Related Query
- redux - reducer state is blank
- Read Store's Initial State in Redux Reducer
- Redux Toolkit: state showing as Proxy / undefined within reducer
- Format date in Redux Reducer before it hits state
- Access other parts of state in Redux reducer
- Replacing new state in react redux reducer without making a copy
- Reactjs Redux should we create sub reducer for every object in the state tree?
- Common loading state reducer with Redux toolkit
- Delete element from array in redux state using a reducer in createSlice
- redux dispatch action and reducer with new state
- Destructing default state in redux reducer
- Redux - application state has the name of reducer as key
- Pass a state value from redux reducer to another reducer
- getDerivedStateFromProps Does not re-render after Redux Reducer state is updated
- Should I organize my react redux reducer composition based on the calls made OR based on the state a reducer manages?
- reducer does not update state in react redux
- How can I update redux state in Reducer in ReactJS?
- What are the cons of deep copying state on each reducer call in Redux application?
- Redux reducer initial state with Typescript
- Update a nested state in a reducer React Redux
- React: Decrease action causes undefined state in Redux reducer
- React Redux - Check if ID exists in state at Reducer
- how to Modify a child object from you state in the reducer with Redux
- React Redux Reducer triggered but not changing state
- Redux reducer - on state change
- change value of property in state reducer redux
- Redux reducer not changing the store's state properly
- Reducer not updating state on action being fired and hence redux store/state not being updated
- Accessing Store's State in Redux From Within A Reducer Function
- Creating helper functions to re-use in my redux reducer code to mutate state
More Query from same tag
- CORS error on httpsCallable firebase in Create React App
- How to use dynamic imports for redux 'actions' for bundle size optimisation
- How to change the background color of the Chakra UI Toast component?
- How to show error message using PhoneInput from react-phone-input-2 package?
- TypeScript + React: Avoid setState on unmounted components
- How to refresh Cognito session in async function that needs to return valid credentials
- User's context on isomorphic (or universal) react app with JWT
- React Typescript element types
- Can the child component receive old data for manipulation from parent component?
- React hooks setstate change only reflects first change
- ReactJS: Uncaught in promise when calling fetch()
- Why are my React form submission values undefined?
- How to check id IndexedDB already exist inside of React lifecycle methods
- eslint throws warning "return value expected"
- React-testing-library + Redux: Could not find "store" in the context of "Connect(Currency)"
- Type Inferance using Fetch with Typescript
- "Error watching file for changes: EMFILE" when run the examples from facebook/react-native/Examples
- Proper way of server-side rendering JavaScript
- React - Call wrapped component callback from higher order function
- parentheses around import ES6
- Installing React-Redux causes the chokidar Problem
- How to set the default value to props
- React mapping items from object in state
- I have a simple blog website, if i add posts or edit posts , and go to home page state in which posts are stored is not saved
- How to force update after dom change with react hooks
- Formik: prevent touching fields (do not mark as .touched) on Submit
- How redux action dispatch differ between class & function component?
- React - queue for loading pictures with possibility to change it
- Get state and update state in a non react component in nextjs
- Pasting of text is being duplicated in textbox in React Component