I'm new to redux. I have three components are TextField , Button and View. I just stored textfield data in redux configureStore, How to pass data by button click from button component to view component. Im using context how to change in redux.
Codesandbox link using redux
Here I tired but I want to diplay only when button click.
CodeSanbox Link using Context
Here is the solution I make ready for you
App.js
import "./styles.css";
import Tfield from "./Tfield";
import ButtonSubmit from "./ButtonSubmit";
import TypoValue from "./TyoValue";
import React, { useCallback, useEffect, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { updateValue } from "./features/user";
export default function App() {
const dataFromRedux = useSelector((state) => state.user.value);
console.log(dataFromRedux);
// useRef to prevent re-rendering
const inputRef = React.useRef(undefined);
const dispatch = useDispatch();
const handleUpdate = () => {
dispatch(updateValue(inputRef.current.value));
};
return (
<div className="App">
<Tfield inputRef={inputRef} />
<ButtonSubmit handleUpdate={handleUpdate} />
<TypoValue />
</div>
);
}
Tfield.js
import "./styles.css";
import * as React from "react";
import TextField from "#mui/material/TextField";
export default function Tfield({ inputRef }) {
console.log("Textfield");
return (
<div>
<TextField
inputRef={inputRef}
label="Enter Name"
/>
</div>
);
}
BtnPage.js
import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { updateValue } from "./features/Updater";
export default function BtnPage({handleUpdate}) {
return (
<div>
<button onClick={() => handleUpdate()}> Update </button>
</div>
);
}
TFPage.js
import React, { useEffect, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { updateValue } from "./features/Updater";
export default function TFPage({myTxt, setMyTxt}) {
//const myData = useSelector((state) => state.update.value);
// const [myTxt, setMyTxt] = useState(myData.text);
//const dispatch = useDispatch();
const handleChange = (char) => {
setMyTxt(char);
//dispatch(updateValue(myTxt));
};
// useEffect(() => {
// // console.log('useEff - render');
// dispatch(updateValue({ text: myTxt }));
// }, [myTxt]);
return (
<div>
<input
value={myTxt}
placeholder="Enter Some Text"
onChange={(e) => handleChange(e.target.value)}
/>
</div>
);
}
ViewPage.js
import React from "react";
import { useSelector } from "react-redux";
export default function ViewPage() {
const myData = useSelector((state) => state.update.value);
console.log(myData);
return (
<div>
<h1> {myData} </h1>
</div>
);
}
As per your Codesandbox link using redux Code.
I think you have to change from import updateValue from "./features/Updater"; to import { updateValue } from "./features/Updater";
And it works fine for me
Your current App.js file
import "./styles.css";
import TFPage from "./TFPage";
import BtnPage from "./BtnPage";
import ViewPage from "./ViewPage";
import { useSelector, useDispatch } from "react-redux";
import updateValue from "./features/Updater";
import { useState, React } from "react";
export default function App() {
const myData = useSelector((state) => state.update.value);
const [myTxt, setMyTxt] = useState(myData.text);
const dispatch = useDispatch();
const handleUpdate = () => {
console.log(myData);
dispatch(updateValue(myTxt));
};
return (
<div className="App">
<TFPage setMyTxt={setMyTxt} myTxt={myTxt} />
<BtnPage handleUpdate={handleUpdate} />
<ViewPage />
</div>
);
}
Your App.js file should look like below
import "./styles.css";
import TFPage from "./TFPage";
import BtnPage from "./BtnPage";
import ViewPage from "./ViewPage";
import { useSelector, useDispatch } from "react-redux";
import { updateValue } from "./features/Updater";
import { useState, React } from "react";
export default function App() {
const myData = useSelector((state) => state.update.value);
const [myTxt, setMyTxt] = useState(myData.text);
const dispatch = useDispatch();
const handleUpdate = () => {
console.log(myData);
console.log(myTxt);
dispatch(updateValue(myTxt));
};
return (
<div className="App">
<TFPage setMyTxt={setMyTxt} myTxt={myTxt} />
<BtnPage handleUpdate={handleUpdate} />
<ViewPage />
</div>
);
}
You can also get a better understanding of the redux toolkit from this given doc Redux toolkit explaination for a better understanding
Your reducer has the following structure:
initialState: { value: { text: "" } }
But you are triggering an action like this:
dispatch(updateValue("youy text here"));
When it should be like this:
dispatch(updateValue({ text: "your text here" }));
Related
I am creating a todo list web app but some and this error is occurring where it says
Compiled with problems:
ERROR in ./src/Components/TodoList.js 6:0-57
Module not found: Error: Can't resolve './react/cjs/react.development' in 'C:\Users\91826\Desktop\WD\projects\todo-list\src\Components'
Can someone please tell me how to solve this.
Code in TodoForm.js
import React, {useState} from "react";
export default function TodoForm(props){
// state
const [input, setInput] = useState("");
const handleChange = e => {
setInput(e.target.value)
}
const handleSubmit = (e) => {
e.preventDefault();
props.addTask({
id: Math.floor(Math.random() * 1000000),
text: input,
isComplete: false
})
setInput('')
}
return(
<form>
<input type="text" placeholder="Add a todo" onChange={handleChange} className="todo-input" value={input} name="text"/>
<button type="submit" onClick={handleSubmit} className= "todo-btn" >ADD TODO</button>
</form>
);
}
Code in TodoList.js
import React from 'react';
import {useState} from '.react/cjs/react.development';
import TodoForm from './TodoForm'
export default function TodoList(){
const [todos, setTodos] = useState([]);
const addTask = task => {
if (!task.text) {
return
}
const newTodos = [task, ...todos];
setTodos(newTodos);
}
return <div>
<TodoForm addTask={addTask} ></TodoForm>
</div>;
}
Code in App.js
import './App.css';
import TodoList from './Components/TodoList'
function App() {
return (
<div className="Todo-list-container">
<TodoList/>
</div>
);
}
export default App;
useState should be imported from React itself, so these 2 lines:
import React from 'react';
import {useState} from './react/cjs/react.development';
Should be changed to
import React, { useState } from "react";
I am learning Redux, in this app I am using react-redux and redux, I am not mutating the store's state, but still my app is not re-rendering
I have this basic counter app, you press the + button the number increases, you press the - button it decreases
My code:
app.js :
`
import './App.css';
import { useDispatch } from 'react-redux';
import { store } from './store';
function App() {
const dispatch = useDispatch();
const handleIncrease = () => {
console.log("+");
dispatch({
type : 'aumentar'
})
console.log(store.getState());
}
const handleDecrease = () => {
console.log("-");
dispatch({
type : 'restar'
})
}
return (
<div className="App">
<h1>Contador</h1>
<h3>{store.getState()}</h3>
<button onClick={handleIncrease}>+</button>
<button onClick={handleDecrease}>-</button>
</div>
);
}
export default App;
`
index.js :
`
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
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>
);
`
store.js
`
import { legacy_createStore as createStore } from "redux";
let initialState = 0;
const reducer = (state = initialState, action) => {
switch(action.type){
case 'aumentar' :
return state + 1;
case 'restar' :
return state - 1;
default :
return state;
}
}
export const store = createStore(reducer);
`
You need to use useSelector to access entries from the state:
// 1. import the hook
import { useDispatch, useSelector } from 'react-redux';
import { store } from './store';
function App() {
const dispatch = useDispatch();
// 2. use it to extract what you need
const count = useSelector(state => state);
const handleIncrease = () => {
console.log("+");
dispatch({
type : 'aumentar'
})
}
const handleDecrease = () => {
console.log("-");
dispatch({
type : 'restar'
})
}
// 3. use the extracted variable inside JSX
return (
<div className="App">
<h1>Contador</h1>
<h3>{count}</h3>
<button onClick={handleIncrease}>+</button>
<button onClick={handleDecrease}>-</button>
</div>
);
}
When your state will become more complex / you will use more reducers, your code will look like:
const whatYouNeed = useSelector(state => state.reducerName.something);
I'm trying to make movies app for portfolio, I got an api with some data and I'm trying to fetch it with useEffect and then setting the state, I also use useContext hook for passing data to children props but the data is empty.
This is App.js
import "./App.css";
import { useEffect, useState, createContext } from "react";
import Axios from "axios";
import { Main } from "./components/Main/Main";
export const AppContext = createContext();
function App() {
const [data, setData] = useState([]);
useEffect(() => {
Axios.get("http://www.omdbapi.com/?s=star wars&apikey=459f1ce1").then((res) => {
setData(res.data.Search);
})
}, []);
return (
<div className="App">
<AppContext.Provider value={data}>
<Main />
</AppContext.Provider>
</div>
);
}
export default App;
This is Main.js
import React from "react";
import { useContext } from "react";
import { AppContext } from "../../App";
import "./Main.css";
export const Main = () => {
const { data } = useContext(AppContext);
console.log(data)
return <div>
</div>;
};
export default Main;
Currently the value of the context is just the value of the data state. To be able to destructure the context change your value to an object containing the data.
<AppContext.Provider value={{ data }}>
Why is the UserContext default value has not changed even I specify a value in <UserContext.Provider>? How can I override the default value of the Context?
this is the App.jsx
import './App.css';
import React, { createContext } from 'react';
import ComponentB from './components/hooks/context/ComponentC';
function App() {
return (
<div className="App">
<ComponentB />
</div>
);
}
export default App;
this is the ComponentB
import React, { createContext, useState } from 'react';
import ComponentC from './ComponentC';
export const UserContext = React.createContext('default');
export const ChannelContext = React.createContext('default');
const provider = UserContext.Provider;
function ComponentB() {
return (
<div>
<provider value='Username'>
<ComponentC />
</provider>
</div>
);
}
export default ComponentB;
this is the ComponentC
import React from 'react';
import ComponentE from './ComponentE';
const ComponentC = () => {
return <ComponentE />;
}
export default ComponentC;
this is the ComponentE
import React, { Component, useContext } from 'react';
import { UserContext, ChannelContext } from './ComponentB';
const ComponentE = () => {
const username = useContext(UserContext);
const channel = useContext(ChannelContext);
return <div>username : {username} channel : {channel}</div>;
}
export default ComponentE;
In your App.jsx file, you say this:
import ComponentB from './components/hooks/context/ComponentC';
^ ^
Down the chain, this leads to this being rendered:
<div className="App">
<div>
username : {username} channel : {channel}
</div>
</div>
As you can see, there's no provider.
Even still, if we fix this one character typo, the issue persists.
This is because you say
const provider = UserContext.Provider;
...
<provider>
...
</provider>
which isn't allowed.
If you do
<UserContext.Provider>
...
</UserContext.Provider>
it works.
https://codesandbox.io/s/wizardly-andras-csxxy?file=/src/App.js
Regarding the first issue, this is why you should do
export const MyComponent = () => <></>;
import { MyComponent } from "./MyComponent";
instead of
const MyComponent = () => <></>;
export MyComponent;
import MyComponent from "./MyComponent";
I'm defining a variable in Page1 and would like to access it in Page2 and then when clicking back to Page1 retrieve the same variable
So far, the variable is set on Page1 but cannot be retrieved on Page2
index.js
import {createStore, applyMiddleware, combineReducers} from 'redux'
import thunk from 'redux-thunk'
import {composeWithDevTools} from 'redux-devtools-extension'
import {Provider} from 'react-redux'
import variableReducer from './reducers'
const store = createStore(
variableReducer,
composeWithDevTools(applyMiddleware(thunk))
)
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
serviceWorker.unregister();
actions/index.js
export const SET_MY_VARIABLE = 'SET_MY_VARIABLE'
export const setMyVariable = myVariable => ({
type: SET_MY_VARIABLE,
payload: {myVariable}
})
reducers/index.js
import {SET_MY_VARIABLE} from '../actions'
const initialState = {
myVariable: ''
}
const variableReducer = (state=initialState, action) => {
switch (action.type) {
case SET_MY_VARIABLE:
return {
...state,
myVariable: action.payload.myVariable
}
default:
return state
}
}
export default variableReducer
components/Page1.js
import React, {useEffect} from 'react'
import {connect, useDispatch} from 'react-redux'
import {setMyVariable} from '../actions'
const Page1 = (props) => {
const dispatch = useDispatch()
useEffect(() => {
dispatch(setMyVariable(5000))
}, [])
return (
<div>
Setting variable<br />
Go to page 2
</div>
)
}
const mapState = state => {
return {
myVariable: state.myVariable
}
}
export default connect(mapState)(Page1)
components/Page2.js
import React from 'react'
import {connect} from 'react-redux'
const Page2 = (props) => {
const {myVariable} = props
console.log('props: ', props)
return (
<div>
Variable: {myVariable}
</div>
)
}
const mapState = state => {
console.log('map2 ', state.myVariable)
return {
myVariable: state.myVariable
}
}
export default connect(mapState)(Page2)
I should be able to set variables to the store in one component and access them throughout the entire App. Instead, I'm not able to retrieve them
Instead of using action.payload.myVariable use action.payload in your reducer/index.js
I've discovered the answer to my problem. I needed to change the <a href tag to a <Link> from react-router-dom in the Page1 component. The <a href was causing a complete reload of all JS and losing state. Here's the corrected component:
components/Page1.js
import React, {useEffect} from 'react'
import {connect, useDispatch} from 'react-redux'
import {setMyVariable} from '../actions'
import {Link} from 'react-router-dom'
const Page1 = (props) => {
const dispatch = useDispatch()
useEffect(() => {
dispatch(setMyVariable(5000))
}, [])
return (
<div>
Variable: {myVariable}<br />
<Link to="/page2">Go to page 2</Link>
</div>
)
}
const mapState = state => {
return {
myVariable: state.myVariable
}
}
export default connect(mapState)(Page1)