I was trying out react redux, but each time I add redux logic in my App component, I don't get any output on the browser window.
I have three files:
App.js
import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { increment } from './counterSlice';
function App() {
const count = useSelector((state) => state.counter.value)
const dispatch = useDispatch()
return (
<div>
<h1>Values is {count}</h1>
<button onClick={() => dispatch(increment)}>Plus</button>
</div>
);
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { Provider } from 'react-redux';
import store from './store';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
);
counterSlice.js
import { createSlice } from "#reduxjs/toolkit";
const counterSlice = createSlice({
name: 'counter',
initialState: {
value: 0
},
reducers: {
increment: state => {
state.value++;
},
decrement: state => {
state.value--;
}
}
});
export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer
And finally the store.js
import { configureStore } from "#reduxjs/toolkit";
import counterReducer from "./counterSlice";
const store = configureStore({
reducer: counterReducer
})
export default store;
What could be the problem?
I tried to run the code using npm start and was expecting to see the initial state value stored in the counter slice display in the browser window.
Related
Lately, I have been trying to use Redux but I get no error and no dev tool error and my page are blank.
So I started my code with the basic Redux boilerplate. I created a userslice, a store and then I provided the store as a wrapper for the <app/>.
Yet after spending hours I can't get to fix the code. Code should just give me back the username inside a div using useselector hook that initialized but it does not seem to work.
App.js:
import React from 'react';
import { useSelector } from 'react-redux';
import './App.css';
function App() {
const username = useSelector(state => state.username)
return (
<div className="App">
{username}
</div>
);
}
export default App;
userSlice.js
import { createSlice } from "#reduxjs/toolkit";
export const userSlice = createSlice({
name:'user'
,
initialState:{
username:'Tony stark',
post:'',
},
reducers:{
updatePost:(state,action)=>{
state.username = action.payload;
}
}})
export const { updatePost} = userSlice.actions;
export default userSlice.reducers;
store.js
import { configureStore } from '#reduxjs/toolkit';
import userSlice from '../redux/userSlice'
export const store = configureStore({
reducer: {
user: userSlice,
},
});
index.js
import React from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from '../src/redux/store'
import App from './App';
import './index.css';
const container = document.getElementById('root');
const root = createRoot(container);
root.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
As it's in the userSlice you'll need to get it from the user property of the Redux root state, like so:
const username = useSelector(state => state.user.username)
Your initial Redux state (annotated) should look like this:
{ // <-- state
user: { // <-- state.user
username: 'Tony stark', // <-- state.user.username
post: '' // <-- state.user.post
}
}
I'm kind of new to redux and react and I'm kind of stuck. so I have this webapp that adds a new list to the redux state todos array.
In my redux devtools state the new list is being added properly but the useSelector in my app is not being updated properly and I can't seem to figure out why.
I tried looking it up online and tried different methods but they didn't work ;-;
Sorry if this is a nooby question and ty in advance for any help <3
my App.js file:
import { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { addTask } from './redux/toDoSlice';
import SideBar from './components/SideBar';
function App() {
const lists = useSelector((state)=> state.todos);
return (
<SideBar
lists = {lists}
/>
)
export default App;
toDoSlice.js file:
import {createSlice} from '#reduxjs/toolkit';
const toDoSlice = createSlice({
name: "todos",
initialState: [],
reducers: {
addList: (state , action)=>{
state.push(action.payload.list);
},
}
});
export const {
addList,
} = toDoSlice.actions;
export default toDoSlice.reducer;
my SideBar.js file:
import React, { useState } from "react";
import { useDispatch } from 'react-redux';
import { addList } from "../redux/toDoSlice";
export default function SideBar(props){
const lists = props.lists;
const dispatch = useDispatch();
const addNewListEvent = (e)=>{
e.preventDefault();
var date_time = new Date().toLocaleString();
var title = 'my list '+date_time;
var list = {
_id:date_time,
title:title,
items:[]
};
dispatch(addList({list: list}));
}
return(
<button onClick={addNewListEvent}>New</button>
)
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import './index.css';
import App from './App';
import store from './redux/store';
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
i want to cnnect redux-saga witdh react-native but this error keep happen...
TypeError: store.getState is not a function. (In 'store.getState()',
'store.getState' is undefined
Warning: Failed prop type: Invalid prop store of type function
supplied to Provider, expected object
this is my code
(index.js)
import {AppRegistry} from 'react-native';
import Root from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => Root);
(App.js)
import React from 'react';
import Store from './store/configureStore'
import {Provider} from 'react-redux';
import {App} from './src/index';
const Root = () => {
return (
<Provider store={Store}>
<App />
</Provider>
);
};
export default Root;
(src/index.js)
import React from 'react';
import Navigator from './Screens/Navigator';
import styled from 'styled-components/native';
const App = ({}) => {
return (
<Navigator/>
);
};
export {App};
(store/cofigurestore.js)
import { applyMiddleware, createStore, compose } from 'redux';
import createSagaMiddleware from 'redux-saga';
import { composeWithDevTools } from 'redux-devtools-extension';
import reducer from '../reducers';
import rootSaga from '../sagas';
const Store = () => {
const sagaMiddleware = createSagaMiddleware();
const middlewares = [sagaMiddleware];
const enhancer = process.env.NODE_ENV === 'production'
? compose(applyMiddleware(...middlewares))
: composeWithDevTools(
applyMiddleware(...middlewares),
);
const store = createStore(reducer, enhancer);
store.sagaTask = sagaMiddleware.run(rootSaga);
return store;
};
export default Store;
(reducer/index.js)
import { combineReducers } from 'redux';
import user from './user';
import post from './post';
// (이전상태, 액션) => 다음상태
const rootReducer = (state, action) => {
switch (action.type) {
// case HYDRATE:
// // console.log('HYDRATE', action);
// return action.payload;
default: {
const combinedReducer = combineReducers({
user,
post,
});
return combinedReducer(state, action);
}
}
};
export default rootReducer;
(sage/index.js)
import { all, fork } from 'redux-saga/effects';
import axios from 'axios';
import postSaga from './post';
import userSaga from './user';
export default function* rootSaga() {
yield all([
fork(postSaga),
fork(userSaga),
]);
}
please help me ......... i want to resolve this problem...... but i don't know how can i do that
In you App.js you should be passing the result of calling you Store function to the Provider and not the function itself.
const Root = () => {
return (
<Provider store={Store()}>
<App />
</Provider>
);
};
I've made two different windows with react and provide same store. But if i change store data in one window, second window doesn't changed. And idk know how to synchronize.(All Reducers and Actions made as on default React project)
First provide(index.js):
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {Provider} from 'react-redux';
import store from "../redux/store";
ReactDOM.render(
<Provider store={store}>
<App/>
</Provider>,
document.getElementById("root"))
First App.js:
import React, {useEffect, useState} from 'react';
import {useDispatch, useSelector} from "react-redux";
import {addNumberAction} from "../redux/addNumber";
export default function App() {
const {number} = useSelector(state=>state.testPage)
const dispatch = useDispatch();
let changeNumber = number
return (
<>
<h1>First</h1>
<button onClick={()=>dispatch(addNumberAction(++changeNumber))}>{number}</button>
</>
)
}
Second provide(index.js):
import React from 'react';
import ReactDOM from 'react-dom'
import App from "./App";
import {Provider} from "react-redux";
import store from "../redux/store";
ReactDOM.render(
<Provider store={store}>
<App/>
</Provider>,
document.getElementById("root2")
)
Second App.js:
import React, {useEffect} from 'react';
import {useDispatch, useSelector} from "react-redux";
import {addNumber, addNumberAction} from "../redux/addNumber";
export default function App() {
const {number} = useSelector(state=>state.testPage)
const dispatch = useDispatch();
let changeNumber = number
return (
<>
<h1>Second</h1>
<button onClick={()=>dispatch(addNumberAction(++changeNumber))}>{number}</button>
</>
)
}
They are not the same store. Each time you use <Provider store={store}> it basically create a store for any components inside it. Calling two <Provider store={store}> will create 2 independent store.
I tried to configure redux state to share state between browser’s windows. At the end, I found info, how it can be with hook.
For example,
import React, { useState, useEffect } from "react";
function HelloStorage() {
const [name, setName] = useState("");
useEffect(() => {
localStorage.setItem("name", name);
}, [name]);
useEffect(() => {
const onReceiveMessage = (e) => {
const { key, newValue } = e;
if (key === "name") {
setName(newValue);
}
};
window.addEventListener("storage", onReceiveMessage);
return () => {
window.removeEventListener("storage", onReceiveMessage);
};
}, []);
const handleChange = (e) => {
setName(e.target.value);
};
return <input value={name} onChange={handleChange} />;
}
For this link you can find information, how create a custom React Hook to share state between browser tabs without Redux state.
You can use redux-state-sync for that (https://www.npmjs.com/package/redux-state-sync).
Lets say you create the store currently like this:
import { configureStore } from '#reduxjs/toolkit';
export const store = configureStore({
reducer
});
All you need is adding the middleware to the store:
import { configureStore } from '#reduxjs/toolkit';
import { createStateSyncMiddleware, initMessageListener } from 'redux-state-sync'
export const store = configureStore({
reducer,
middleware: [createStateSyncMiddleware()],
});
initMessageListener(store);
I cant figure out what is going on. I have redux-thunk setup just like always. For some reason that I can not figure out I get the error: Error: Actions must be plain objects. Use custom middleware for async actions. can anyone help me figure this error out?
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';
import './index.css';
ReactDOM.render(
<App />,
document.getElementById('root')
);
CreateStore.js
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducers from './reducers';
export default function configureStore(initialState) {
return createStore(
reducers,
initialState,
applyMiddleware(thunk)
);
}
app.js
import React, { Component } from 'react';
import Routes from './Routes';
import {Provider} from 'react-redux';
import configureStore from './configureStore';
const store = configureStore();
class App extends Component {
render(){
return (
<Provider store={store}>
<Routes/>
</Provider>
);
}
}
export default App;
Today.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { autoLocate } from '../actions';
import { Button } from './Common'
class Today extends Component {
componentDidMount() {
this.props.fetchTodayWeather('http://
api.wunderground.com/api/cc9e7fcca25e2
ded/geolookup/q/autoip.json');
}
render() {
return (
<div>
<div style={styles.Layout}>
<div><Button> HAHAH </Button></div>
<div><Button> Weather Now </Button></div>
</div>
</div>
);
}
}
const mapStateToProps = state => {
const loading = state.locate.loading;
const located = state.locate.autolocation;
return{ loading, located };
};
const mapDispatchToProps = (dispatch) => {
return {
fetchTodayWeather:(Url) => dispatch(autoLocate(Url))
};
};
export default connect(mapStateToProps,mapDispatchToProps)(Today);`
autoLocate.js
import { AUTODATA,
AUTOLOCATING
} from './types';
export const autoLocate = (url) => {
return (dispatch) => {
dispatch({ type: AUTOLOCATING });
fetch(url)
.then(data => fetchSuccess(dispatch, data))
};
};
const fetchSuccess = (dispatch, data) => {
dispatch({
type: AUTODATA,
payload: data
});
};