I'm studyin this code of a react component:
https://github.com/algolia/react-instantsearch/blob/master/packages/react-instantsearch-core/src/core/createStore.js
export default function createStore(initialState) {
let state = initialState;
const listeners = [];
function dispatch() {
listeners.forEach(listener => listener());
}
return {
getState() {
return state;
},
setState(nextState) {
state = nextState;
dispatch();
},
subscribe(listener) {
listeners.push(listener);
return function unsubcribe() {
listeners.splice(listeners.indexOf(listener), 1);
};
},
};
}
I was surprise this code don't use , but a own store? someone can me explain about this code? this a way to use global store and don't use redux-store?
this lines:
listeners.forEach(listener => listener());
return function unsubcribe() {
listeners.splice(listeners.indexOf(listener), 1);
};
what does mean?
This is simplified implementation of Redux-like store. It doesn't involve other Redux entities like middlewares or reducers.
setState does exactly what it's expected from it, so does subscribe.
listeners.forEach(listener => listener()) notifies listeners that a state was updated.
return function unsubcribe() {...} returns a function to unsubscribe a listener from state updates.
Related
I've got a reducer function like the following:
nextStep: (state) => {
if (state.currentStep < state.totalSteps && state.currentStepValid) {
state.currentStep += 1;
}
},
I'm listening to changes with the "useSelector" hook and I need to trigger a change even if the value doesn't change when dispatch is called. How is it possible to implement this?
Best regards!
At first you must create store and add your reducer to createStore method
import todoApp from './reducers'
const store = createStore(todoApp)
Then implement your reducer as function, which consume two params prevState and actions and return next state based on action, like this in basic example Basic tutorial
import { VisibilityFilters } from './actions'
const initialState = {
visibilityFilter: VisibilityFilters.SHOW_ALL,
todos: []
}
function todoApp(state, action) {
if (typeof state === 'undefined') {
return initialState
}
// For now, don't handle any actions
// and just return the state given to us.
return state
}
In your code snippet, you aren't returning next state instead you are modify prev state.
You must write something like that:
nextStep: (state) => {
if (state.currentStep < state.totalSteps && state.currentStepValid) {
return {
...state,
currentStep: state.currentStep + 1
};
} else {
return state;
}
},
lately i'm facing a tough issue with React/Redux (Thunk): i've created my Store with Action and Reducer properly, in my Component i trigger the Async function in componentDidMount method in order to update the state, But the State doesn't seems to be changing, although it does changed in componentDidUpdate and mapStateToProps functions ! Why ? Here is my code :
export const getAllInterventions = () => {
return dispatch => {
dispatch(getAllDataStart());
axios.get('/interventions.json')
.then(res => {
dispatch(getAllDataSuccess(res.data));
})
.catch(err => {
dispatch(getAllDataFail(err));
});
};
My reducer :
case actionTypes.GET_ALL_INTERVENTIONS_SUCCESS:
return {
...state,
interventions: interventions: action.interventions
};
My Component:
componentDidMount() {
this.props.getAllInterventions();
console.log('DidMount: ', this.props.inter); /*Empty Array Or Undefined */
}
const mapStateToProps = state => {
console.log('mapStateToProps', state);
return {
inter: state.interventions,
error: state.error
};
Your action and state changes are both asynchronous, doing console.log right after will always return before those changes are actually completed.
Your state is being updated, which is why it works when you console.log in the mapStateToProps.
I suggest setting up redux-devtools, you'll be able to easily track your actions/state.
I hope the code can be usefully for you
componentWillReceiveProps(nextProps){
console.log(nextProps.inter)
}
I am setting my redux state through a value I have in localStorage. This works fine when I navigate into my page. However, when I do a hard refresh the state is never set, despite the value in localStorage being passed down.
This is what my code looks like:
class SomeComponent {
componentWillMount() {
if (typeof localStorage !== 'undefined') {
console.log('I get to here...', localStorage.getItem('someValue')) // this comes in as expected always
this.props.setMyReduxState(localStorage.getItem('someValue'))
}
}
render () {
// will have the value of the localStorage item someValue when navigated into the page
// will be an empty string if I do a hard refresh
console.log('this.props.myReduxState', this.props.myReduxState)
return (
<div>
Stuff...
</div>
)
}
}
const mapStateToProps = (state) => {
return {
myReduxState: state.something.myReduxState || ''
}
}
const mapDispatchToProps = (dispatch) => {
return {
setMyReduxState (someValue) {
dispatch(setMyReduxState(someValue))
}
}
}
Any ideas?
Edit: just a small addition to simplify the problem: I also tried it sending a string directly to setMyReduxState function, without the localStorage, the state still isn't being set. So basically something like this:
componentWillMount() {
this.props.setMyReduxState('some string!')
}
From my understanding every time the redux state is set, the component should re-draw, which isn't happening when there is a hard refresh. Are there any reasons for this or something being done incorrectly?
Edit2: Including my action creator and reducer in case needed:
const SET_MY_REDUX_STRING = 'admin/users/SET_MY_REDUX_STRING'
const defaultState = {
myReduxState: ''
}
export function setMyReduxState (value) {
return {
type: SET_MY_REDUX_STRING,
myReduxState: value
}
}
export default function reducer (state = defaultState, action = {}) {
switch (action.type) {
case SET_MY_REDUX_STRING:
return Object.assign({}, state, { myReduxState: action.myReduxState })
default:
return state
}
}
Some of the checklist you need to follow while using redux -
Are you dispatching an action creator that returns an object with 'type' and data? Here 'type' is mandatory.
Does your reducer return the state with the updated data that it received?
Make sure you do not mutate the state in reducer. Always use {...state, someKey: someValue}
I am struggling to figure out why a change to an object located in the store handled by a redux reducer is not triggering the componentDidUpdate method inside of my react component. I am using the react developer tools and can see the correct store after the state is reduced, and am also using redux logger and can see the correct after state after the reducer makes the change. But the component still never calls the update method.
action
export const GSAP_ANIMATION = 'GSAP_ANIMATION';
export const animateGsap = (key, next) => {
return {
type: GSAP_ANIMATION,
payload: {
key: key,
next: next
}
}
}
reducer
case GSAP_ANIMATION:
return Object.assign({}, state, {
...state,
gsap: {
...state.gsap,
[payload.key]: {
...state.gsap[payload.key],
next: {
...payload.next
}
}
}
});
component connection
const mapStateToProps = (state, ownProps) => {
return {
component: state.priorities.gsap[ownProps.id]
};
}
const mapDispatchToProps = (dispatch) => {
return {
addGsap: (key) => dispatch(actions.addGsap(key))
};
}
GsapComponent = connect(mapStateToProps, mapDispatchToProps)(GsapComponent);
In the GsapComponent I have the componentDidUpdate method, but this method is never called. However, I can see that the value of this.props.component should be correct when I view the component in the chrome extension.
edit
also doing { JSON.stringify(this.props.component) } correctly shows the updated prop values. Nothing in the react component update lifecycle is every triggered though.
I have also tried to use the immutibility-helper from react like so
return update(state, {
gsap: {
[payload.key]: {
$merge: { next: payload.next }
}
}
});
but it still doesn't call the lifecycle method.
GsapComponent source code.
Check this object assign documentation. Section Examples -> Warning for Deep Clone. I think that your reducer return object is === as state object so react can't detect change. Try json.parse(json.stringify) workaround or use immutable-js.
I would like to use redux to store the state of my whole react application, however I am stuck with a particular case:
what to do with redux when the component needs a local state, modified by lifecycle methods like componentDidUpdate or componentDidMount ?
Example of a react component to contain "cards" arranged by isotope layout library:
componentDidMount() {
let container = ReactDOM.findDOMNode(this);
if (! this.state.isotope) {
this.setState({ isotope: new Isotope(container, {itemSelector: '.grid-item', layoutMode: 'masonry'})});
}
}
componentDidUpdate(new_props, new_state) {
if (new_state.items_list != this.state.items_list) {
if (this.state.isotope) {
this.state.isotope.reloadItems();
this.state.isotope.layout();
this.state.isotope.arrange();
}
}
}
Is there a way to remove the local state in this component and to use redux instead ? I can't see how to do it
Put your items_list in your redux state. Your reducer might look like this:
const initialState = {
items: []
};
export function myReducer(state = initialState, action) {
switch (action.type) {
case 'SET_ITEMS':
return Object.assign({}, state, {
items: action.items
});
}
return state;
}
Or for something a little more complex:
const initialState = {
items: []
};
export function myReducer(state = initialState, action) {
switch (action.type) {
case 'ADD_ITEM':
return Object.assign({}, state, {
items: [ ...state.items, action.item ]
});
case 'REMOVE_ITEM':
return Object.assign({}, state, {
items: [
...state.items.slice(0, action.index),
...state.items.slice(action.index + 1)
]
});
}
return state;
}
Once you've configured your store and Provider (see the Redux docs), set up your "smart component" like so:
function mapStateToProps(state) {
return {
items: state.items
}
}
function mapDispatchToProps(dispatch) {
const actions = bindActionCreators(actionCreators, dispatch);
return {
addItem: actions.addItem,
removeItem: actions.removeItem
};
}
export default connect(mapStateToProps, mapDispatchToProps)(Root);
Now your items and actions are props to your Root component. If your items live in a lower order component, simply pass them down the tree as props.
I hope that gives you the general idea. With Redux what you'll find that your React components will use state a lot less and props a lot more.
One more thing...
This might be a minor matter, but I urge you NOT to store your isotope object on the component state. (Regardless of whether or not you use Redux.) The isotope object isn't really a piece of state, it's your view. In React, a component updates in response to a change in state. But your componentDidUpdate does the reverse: it changes the state in response to a component update.
As an alternative, simply store it on the object itself. i.e.
componentDidMount() {
const container = ReactDOM.findDOMNode(this);
this.isotope = new Isotope(container, {
itemSelector: '.grid-item',
layoutMode: 'masonry'
});
}
componentDidUpdate(prevProps, prevState) {
if (prevProps.items !== this.props.items) {
this.isotope.reloadItems();
this.isotope.layout();
this.isotope.arrange();
}
}
(Whilst normally I would recommend against against using these sort of instance variables in React, DOM manipulation libraries like Isotope are a worthy exception.)