Newbie here in the world of reactjs. I tried using redux and redux thunk along with reducers, though I don't full understand if they are all in one package. I'm creating a login in that will using those items. But I kept on seeing store.getstate is not a function.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {Provider} from 'react-redux';
const store = require('./store/index');
ReactDOM.render(
//<React.StrictMode>
<Provider store="{store()}">
<App />
</Provider>,
//</React.StrictMode>,
document.getElementById('root')
);
store/index.js
import {createStore} from 'redux'
import AllReducers from './reducers/AllReducers';
// import
const initialStates = {
auth: {
loggedIn: false,
user:{}
}
}
const store = createStore(AllReducers,initialStates);
export default store;
store/reducers/AllReducers.js
import { combineReducers } from "redux";
import AuthReducer from "./AuthReducer";
const AllReducers = combineReducers({auth: AuthReducer})
export default AllReducers;
store/reducers/AuthReducers.js
const AuthReducer = (state = {}, actions) => {
switch (actions.type) {
case 'value':
return state;
default:
return state;
}
}
export default AuthReducer;
I kept on getting the TypeError: store.getState is not a function
Can someone help me at least an advice on how to trap this error then i will do the rest for my studying.
Thanks.
I think you did mistake here.
<Provider store="{store()}">
You should write
<Provider store={store}>
I hope this answer will help you!!
The problem in <Provider store="{store()}">. You need to update like this:
<Provider store={store}>
Related
This is my first application I am building with the MERN stack and currently I am going through a tutorial. For some reason I cannot figure out the message :
Attempted import error: 'reducers' is not exported from './reducers'.
This is currently my code in my App.js:
import React from "react";
import ReactDom from "react-dom";
import { Provider } from "react-redux";
import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import { reducers } from "./reducers";
import App from "./App";
const store = createStore(reducers, compose(applyMiddleware(thunk)));
ReactDom.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
);
In the reducers file:
posts.js
export default reducers = (posts = [], action) => {
switch (action.type) {
case "FETCH_ALL":
return action.payload;
case "CREATE":
return posts;
default:
return posts;
}
};
index.js
import { combineReducers } from "redux";
import Post from "./posts";
export default combineReducers({ posts });
to get a better visual this is currently my screen:
computer screen
In your reducers/index.js, you are exporting it as default. Therefore, if you want to import it in your src/index.js, you need to use import reducers from "./reducers" (with no curly braces).
Another approach is that you can use export const reducers = combineReducers({ posts }); in reducers/index.js, then you don't need to modify src/index.js.
You can read more about the document on export in JavaScript.
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')
);
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import { Provider } from 'react-redux'
import store from './store'
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
)
store.js
import { createStore, combineReducers } from 'redux'
import thunk from 'redux-thunk'
import { composeWithDevTools } from 'redux-devtools-extension'
import { bookReducers } from './reducers/bookReducers'
const reducer = combineReducers({
book: bookReducers,
})
const middleware = [thunk]
const initialState = {
books: [],
isLoading: false,
eror: '',
}
const store = createStore(
reducer,
initialState,
composeWithDevTools(...middleware)
)
export default store
error I got in my console
I got this error from provider component while adding prop store but its the same as in redux docs . what is happening here
I recieve this error message when I run my react app:
Could not find "store" in the context of "Connect(Booklist)". Either
wrap the root component in a , or pass a custom React
context provider to and the corresponding React context
consumer to Connect(Booklist) in connect options.
I'm using Create React App and trying to create an app that lists some details.
See code below:
app.js
import React, { Component } from 'react';
import './App.css';
import Booklist from './container/book-list';
class App extends Component {
render() {
return (
<div className="App">
<Booklist />
</div>
);
}
}
export default App;
book-list.js
import React, {Component} from 'react';
import { connect } from 'react-redux';
class Booklist extends Component{
renderList(){
return this.props.books.map((book) =>{
return(
<li key={book.title}>{book.title}</li>
);
}
);
}
render(){
return this.props.books.map((book) =>{
return(
<ul>{this.renderList()}</ul>
);
}
);
}
}
function mapStateToProps(state){
return {
books: state.books
}
}
export default connect (mapStateToProps)(Booklist);
books_reducer.js
export default function(){
return[
{title: booke1},
{title: booke2},
{title: booke3},
{title: booke3}
]
}
index.js in reducer
import {combineReducers} from redux;
import booksReducer from './books_reducer'
const rootReducer = combineReducers({
books: booksReducer
});
export default booksReducer;
Are you wrapping your app in your store?
import { Provider } from 'react-redux';
const store = createStore(
combineReducers({
books: booksReducer
});
)
<Provider store={store}>
<App />
</Provider>
When we use Redux we have to createStore for store all reducers of our app.we combine all Reducers in single component like .
import {combineReducers} from 'redux';
import BooksReducer from './Books';
import ActiveBookReducer from './activeReducer';
const RootReducer = combineReducers({
books : BooksReducer,
activeBookreducer : ActiveBookReducer
})
export default RootReducer;
In Above Example I create Two Reducers BookReducer and ActiveBookReducer and I stored both in single Reducer called RootReducer using combineReducer.
First import provider and createStore libraries in your index.js file.
import your RootReducer in your index.js file.
Then take one variable called store and stored RootReducer using createStore library .const store = createStore(RootReducer);
Then add provider in index.js: <Provider store = {store}>
<App />
</Provider>,
Your code should look like this :
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import { createStore } from 'redux';
import App from './Components/App';
import RootReducer from './Reducers';
const store = createStore(RootReducer);
ReactDOM.render(
<Provider store = {store}>
<App />
</Provider>,
document.getElementById('root')
);
I am trying to add the react sticky header to my stepper.
if I try to render bot the components together I am getting an error.
so I debugged and rendering separately.
when I render separately I am not facing an error. store is not defined
can you tell me how to fix it.
so that in future I will fix it myself.
providing my code snippet and sandbox below
https://codesandbox.io/s/y2kjpl343z
index.js
import React from "react";
import ReactDOM from "react-dom";
import Demo from "./demo";
import App from "./components/App";
import { render } from "react-dom";
import { Provider } from "react-redux";
import { createStore, applyMiddleware } from 'redux'
// const store = createStore(
// reducer,
// applyMiddleware(thunk, logger)
// )
//ReactDOM.render(<Demo />, document.querySelector("#root"));
render(
<Provider store={store}>
<App />
<Demo />
</Provider>,
document.getElementById("root")
);
You have to define a redux store to pass down to the Provider component.
To define a store, you need to have at least a reducer, I am going to create a fake one now, you'll create your own later:
import React from "react";
import ReactDOM from "react-dom";
import Demo from "./demo";
import App from "./components/App";
import { render } from "react-dom";
import { Provider } from "react-redux";
import { createStore } from 'redux'
const reducer = () => ({})
const store = createStore(reducer)
render(
<Provider store={store}>
<App />
<Demo />
</Provider>,
document.getElementById("root")
);
Update after your comment
If you don't need to use redux, just use a div, or better, a Fragment:
import React, { Fragment } from "react";
import ReactDOM from "react-dom";
import Demo from "./demo";
import App from "./components/App";
ReactDOM.render(
<Fragment>
<App />
<Demo />
</Fragment>,
document.getElementById("root")
);
Because you didn't create a store using the redux function : createStore. Before being able to use redux, you first need to create a reducer to give to your Provider.
Example from the documentation :
import { createStore } from 'redux'
function todos(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
return state.concat([action.text])
default:
return state
}
}
const store = createStore(todos, ['Use Redux'])
render(
<Provider store={store}>
<App />
<Demo />
</Provider>,
document.getElementById("root")
);
You are passing a store variable to the Provider component, but never define it.
Create new file:
import {createStore, combineReducers, applyMiddleware, compose} from 'redux';
import thunk from 'redux-thunk';
const rootReducer = combineReducers({
// You can fill here all the states that you want
})
export const store =
createStore(
rootReducer,
compose(
applyMiddleware(thunk), window.devToolsExtension ? window.devToolsExtension() : f => f)
);
Now import the file to your index.js
import store from './store';