Invariant Violation: Could not find “store” React Native - react-native

I get the following error using redux in native react
Invariant Violation: Invariant Violation: Could not find "store" in
the context of "Connect(Lista)". Either wrap the root component in a
, or pass a custom React context provider to and
the corresponding React context consumer to Connect(Lista) in connect
options.
My code is the following
SettingStore
import {createStore, applyMiddleware} from 'redux';
import Reducers from './Reducer'
import thunk from 'redux-thunk'
export default SettingStore = () => {
let store = createStore(Reducers, applyMiddleware(thunk))
return store
}
my index reducer
import {combineReducers} from 'redux';
import loginreducer from './login.reducer'
export default combineReducers({
login: loginreducer,
})
my index action
import {FETCHING_GETDATA_PARVU} from '../Constante'
import {GetParv} from '../Api/Parvularia.api'
export const getParvuSuccess = (data) => {
return {type: FETCHING_GETDATA_PARVU, data}
}
export const GetParvu = () => {
return (dispatch) => {
dispatch(getData())
GetParv(1)
.then(([response, json]) => {
dispatch(getParvuSuccess(json))
})
.catch((error) => console.log(error))
}
}
This is the maintab.reducer of my reducer
import {FETCHING_GETDATA_PARVU} from '../Constante'
const initialState = {
data: [],
isFeching: false,
error: false
}
export default dataReducer = (state = initialState, action) => {
switch(action.type) {
case FETCHING_GETDATA_PARVU:
return {
...state,
data: action.data,
isFeching: false
}
default:
return state
}
}
and let's say this is my app.js of the redux structure
import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import {Provider} from 'react-redux';
import Lista from '../screens/Educadora/Lista';
import SettingStore from './SettingStore'
let store = SettingStore()
const Ap = () => (
<Provider store={store}>
<Lista/>
</Provider>
)
export default Ap;
This last part is the one that generates me more doubt, I think that this is my error but I do not know why I am new in react native
Edit
This is where I want to show the query made with redux
import { connect } from 'react-redux'
import {GetParvu} from '../../Redux/Actions'
class Lista extends React.Component {
componentWillMount() {
this.props.GetParvu()
render(){
return(algoaca)
}
}
}
const mapStateToProps = state => {
return {
parvu: state.data
}
}
const mapDispatchToProps = dispatch => {
return {
GetParvu: () => {
return dispatch(GetParvu(1))
}
}
}
AppRegistry.registerComponent('EqualsMobile', () => Lista);
export default connect(mapStateToProps, mapDispatchToProps)(Lista);

You have connecting your component in wrong way. connect() is high order component that take mapStateToProps as an argument to map store to your component.
You can use it in your component like this.
function mapStateToProps(state){
return {state}
}
export default connect(mapStateToProps)(your_component_name);

Related

Unable to implement Redux store in React Native

I'm trying hard to wire redux store in a react-native app but seems like I'm missing something. Any help will be appreciated.
action.js
export const getdata = (data) => {
return (dispatch, getState) => {
dispatch({
type: "GET_DATA",
data
});
};
};
reducer/dataReducer.js
export default (state = {}, action) => {
switch (action.type) {
case GET_DATA:
return { ...state, response: action.data };
default:
return state;
}
};
reducer/index.js
import { combineReducers } from 'redux';
import dataReducer from './dataReducer';
//other imports
export default combineReducers({
data: dataReducer,
//other reducers
});
store/configureStore.js
import { createStore, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducers from './../reducer;
export default function configure(initialState = {}) {
const store = createStore(reducer, initialState, compose(
applyMiddleware(thunk),
window.devToolsExtension ? window.devToolsExtension() : f => f
));
return store;
}
main.js (where I dispatch action)
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import Routes from './Routes';
import configureStore from './store/configureStore';
import { getdata} from './actions';
const store = configureStore();
store.subscribe(() => {
console.log('New state', store.getState); //doesn't update at all
});
class Main extends Component {
componentDidMount() {
store.dispatch(getdata('abc')); //calling action creator
}
render() {
return (
<Provider store={store}>
<Routes />
</Provider>
);
}
}
export default Main;
I also tried wiring Chrome extension to see redux store updates, but no luck there. It always says no store found. How can I get this working?
store can be accessed in the a child class inside the Routes Component by react-redux connect
but here no store in the class but I think You can do the following
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import Routes from './Routes';
import configureStore from './store/configureStore';
import { getdata} from './actions';
const store = configureStore();
store.subscribe(() => {
console.log('New state', store.getState()); //getState() is method
});
store.dispatch(getdata('abc'));
class Main extends Component {
render() {
return (
<Provider store={store}>
<Routes />
</Provider>
);
}
}
export default Main;
You want to dispatch your actions from your container components (aka. smart components, the ones connected to the Redux store). The container components can define props in mapDispatchToProps that let them dispatch actions. I don't have your code, so I'm just gonna assume that your Routes component is the container component that you are connecting to the Redux store. Try something like:
class Routes extends Component {
....
componentDidMount() {
this.props.retrieveData();
}
...
}
const mapStateToProps = state => {
...
};
const mapDispatchToProps = dispatch => {
return {
retrieveData: () => dispatch(getdata('abc'));
};
};
export default connect(mapStateToProps, mapDispatchToProps)(Routes);

Null in array of objects

So, I have a problem with REACT/REDUX, my array of objects returns a proper value but also return an undefined, and I don't know why. In redux dev tools it show's a null instead of undefined, also I have this error in console: Warning: Failed prop type: The prop task is marked as required in NewToDo, but its value is undefined.
Action file
import {ADD_TODO} from "./types";
import {GET_TODO} from "./types";
export const addTodo = (todo) => dispatch => {
dispatch({
type: ADD_TODO,
payload: todo,
})
}
export const getTodo = () => dispatch => {
dispatch({
type: GET_TODO,
})
}
Reducer
import {ADD_TODO} from "../actions/types";
import {GET_TODO} from "../actions/types";
const initialState = {
toDos: [
{task: 'Make a dinner', priority: '4'}
],
};
export default function(state=initialState, action){
switch(action.type){
case ADD_TODO:
return{
...state,
toDos: [action.payload, ...state.toDos]
}
case GET_TODO:
return {
...state,
}
default:
return state;
}
}
A component that renders the tasks
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux'
class NewToDo extends Component {
render() {
console.log(this.props.task)
return (
<div>
</div>
);
}
}
NewToDo.propTypes = {
task: PropTypes.object.isRequired,
};
export default NewToDo;
A component with all toDos
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import NewToDo from './newToDo'
import {getTodo} from "../../actions/toDoActions";
import {connect} from 'react-redux'
class ToDos extends Component {
componentDidMount(){
this.props.getTodo();
}
render() {
const {toDos} = this.props;
console.log(toDos)
return (
<div>
{toDos.map( todo => (
<NewToDo task={todo}/>
))}
</div>
);
}
}
ToDos.propTypes = {
toDos: PropTypes.array.isRequired,
getTodo: PropTypes.func.isRequired,
}
const mapStateToProps = (state) => ({
toDos: state.toDo.toDos
})
export default connect(mapStateToProps, {getTodo})(ToDos);
Warning: Failed prop type: The prop task is marked as required in
NewToDo, but its value is undefined.
You need to pass a prop called task to NewToDo. It is undefined because you have required in your PropTypes a prop called task that is an object but somewhere along the way, you are not passing that prop. You can pass the prop by connecting to the redux store using mapStateToProps as well.
Also, in your initialState for your reducer, shouldn't the default be initialState.todos? Just seems like that might be more logical and then you can use the spread operator on the case of ADD_TODO just by spreading [action.payload, ...state].
Update
I changed your toDoReducer.js to:
import {ADD_TODO} from "../actions/types";
import {GET_TODO} from "../actions/types";
const initialState = {
toDos: [
{task: 'Make a dinner', priority: '4'}
],
};
export default function(state=initialState.toDos, action){
switch(action.type){
case ADD_TODO:
return [action.payload, ...state]
case GET_TODO:
return [
...state,
]
default:
return state;
}
}
I changed your ToDo.js to:
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import NewToDo from './newToDo'
import {getTodo} from "../../actions/toDoActions";
import {connect} from 'react-redux'
class ToDos extends Component {
componentDidMount(){
this.props.getTodo();
}
render() {
const {toDos} = this.props;
console.log(toDos)
return (
<React.Fragment>
{toDos.map( todo => (
<NewToDo task={todo}/>
))}
</React.Fragment>
);
}
}
ToDos.propTypes = {
toDos: PropTypes.array.isRequired,
getTodo: PropTypes.func.isRequired,
}
const mapStateToProps = (state) => ({
toDos: state.toDos
})
export default connect(mapStateToProps, {getTodo})(ToDos);
You'll need to connect your reducer to the component page so that it has access to task from the redux store as props :
import * as todoSelector from ../reducer;
/* other code blocks */
const mapStateToProps = (state) => {
return {
task: todoSelector.getTask(state),
};
}
export default connect(mapStateToProps)(NewToDo);
In the reducer have a selector function which return the task from state.
export function getTask(state) {
const task = state.task;
/* task manipulations to fit rendering needs */
return task;
}
you have not connected your component to the redux store. You then also need to take the redux store and map your value to props. Try this
Class NewToDo extends Component {
...
}
const mapStateToProps = (state) => {
return {
task: state.toDos
}
}
export default connect(mapStateToProps)(NewToDo)
this should link your array to this.props.task

Action.type undefined redux

No matter what I do, I can't get rid of the mistake. I have often rewritten the actions but the error remains. I also wrote thunk at the top of the createstore. It would be great if you could support me a little bit.
My action, nothing special here only a fetch call to get my players
import fetch from "cross-fetch"
export const SET_PLAYERS = "setplayers"
export const setPlayers = players => {
return{
type: "setplayers",
players
}
}
export const fetchPlayers = () => (dispatch, getState) => {
return fetch("http://localhost:4444/api/players")
.then(response => response.json())
.then(players => {
dispatch(setPlayers(players))
}).catch(err => {
console.log("Could not fetch assortments" , err)
})
}
Component, at this point in time only a dummy to invoke the action:
import React from "react"
import PropTypes from "prop-types"
import { fetchPlayers } from "./action"
import { connect } from "react-redux"
import EnhancedTable from "../components/list/List"
import getPlayers from "./reducer"
class PlayerTable extends React.Component {
constructor(props) {
super(props)
this.state = {
}
}
componentDidMount(){
this.props.fetchPlayers()
}
render() {
console.log("#######", this.props.players)
return (
<EnhancedTable />
)
}
}
PlayerTable.propTypes = {
classes: PropTypes.object.isRequired,
}
const mapStateToProps = state => ({
players: getPlayers(state)
})
export default connect(mapStateToProps, { fetchPlayers })(PlayerTable)
Reducer
import { SET_PLAYERS } from "./action"
const setPlayers = (state={}, action) => {
console.log("ACTION", action)
switch (action.type) {
case SET_PLAYERS:
return {...state, players: action.players}
default:
return state
}
}
export default setPlayers
export const getPlayers = state => ([])
CombinedReducers
import { combineReducers } from "redux"
import { reducer as formReducer } from "redux-form"
import showProgressbar from "../components/progressbar/reducer"
import showSnackBar from "../components/snackbar/reducer"
import setPlayers from "../player/reducer"
export default combineReducers({
form: formReducer,
showProgressbar,
showSnackBar,
setPlayers
})
CreateStore
import App from "./App"
import React from "react"
import rootReducer from "./reducers"
import thunk from "redux-thunk"
import { render } from "react-dom"
import { createStore, applyMiddleware, compose } from "redux"
import { Provider } from "react-redux"
import { createLogger } from "redux-logger"
const store = createStore(
rootReducer,
compose(applyMiddleware(thunk),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
))
render(
<Provider store={store}>
<App />
</Provider>,
/* eslint-disable*/
document.getElementById("root")
/* eslint-enable */
)
You've defined mapStateToProps properly, but don't you need to do the same with mapDispatchToProps for the second argument to connect()?
const mapStateToProps = state => ({
players: getPlayers(state)
})
const mapDispatchToProps = dispatch => ({
fetchPlayers() {
dispatch(fetchPlayers())
}
})
export default connect(mapStateToProps, mapDispatchToProps)(PlayerTable)

redux combineReducers() is not working in my project with Ducks pattern

I want to separate modules, so I tried to separate files in the src/store/modules directory.
To merge reducer modules, I use combineReducers() in modules/index.js.
Before separating these modules, modules/index.js file's code was modules/board.js.
Then I added board.js file. I moved code of index.js to board.js. Finally I added combineReducer() in index.js, but somehow it is not working.
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './containers/App';
import store from './store';
const rootElement = document.getElementById('root');
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
rootElement
);
src/containers/BoardContainer.js
import React from 'react';
import Board from '../components/Board';
import { connect } from 'react-redux';
import * as boardActions from '../store/modules/board';
class BoardContainer extends React.Component {
componentWillMount() {
this.props.handleReadBoards();
}
render() {
/* ... */
}
}
const mapStateToProps = (state) => {
return {
boardList: state.get('boardList')
};
}
const mapDispatchToProps = (dispatch) => {
return {
handleReadBoards: () => { dispatch(boardActions.readBoardList()) }
};
}
export default connect(mapStateToProps, mapDispatchToProps)(BoardContainer);
src/store/index.js
// redux
import { createStore, applyMiddleware, compose } from 'redux';
import reducers from './modules';
// redux middleware
import thunk from 'redux-thunk';
const store = createStore(reducers,
compose(applyMiddleware(thunk))
);
export default store;
src/store/modules/index.js
import { combineReducers } from 'redux';
import board from './board';
export default combineReducers({
board
});
src/store/modules/board.js
import { createAction, handleActions } from 'redux-actions';
import { Map, List } from 'immutable';
import * as boardApi from '../../lib/api/board';
// Action Types
const READ_BOARD_LIST = 'board/READ_BOARD_LIST';
// Action Creators
export const readBoardList = () => async (dispatch) => {
try {
const boardList = await boardApi.getBoardList();
dispatch({
type: READ_BOARD_LIST,
payload: boardList
});
} catch (err) {
console.log(err);
}
}
// initial state
const initialState = Map({
boardList: List()
})
// reducer
// export default handleActions({
// [READ_BOARD_LIST]: (state, action) => {
// const boardList = state.get('boardList');
// return state.set('boardList', action.payload.data);
// },
// }, initialState);
// reducer
export default function reducer(state = initialState, action = {}) {
switch (action.type) {
case READ_BOARD_LIST:
return state.set('boardList', action.payload.data);
default:
return state;
}
}
Your reducer now contains submodules. So that you have to state from which module you want to get the data: state.board.get('boardList').
You can try to setup redux tool to easy visualize your data inside redux.
const mapStateToProps = (state) => {
return {
boardList: state.board.get('boardList')
};
}

React Action, Reducer & Connect Syntax

I have the following React Code to Create a booleen true/false in Redux store which is then used to open/close a Material UI Drawer/Side Menu.
I'm new to React and I wanted to ask if what I'm doing is correct or if I'm making obvious mistakes etc.
Note: the solution works (it opens/closes the Drawer as expected). I just interested to know if I should be coding differently... also I've removed a little code so it can be read more easily...
Actions File:
export const setDrawerPopOutMenuStatus = {
type: 'DRAWER_POPOUT_MENU_STATUS'
}
Reducers File:
import { combineReducers } from 'redux';
const setDrawerPopOutMenuStatus = (state = true, action) => {
switch (action.type) {
case 'DRAWER_POPOUT_MENU_STATUS':
if(state) {
return false;
}else{
return true;
}
default:
return state;
}
}
export default combineReducers({
setDrawerPopOutMenuStatus
})
Store File
import { createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import reducer from './reducers.js';
import { setDrawerPopOutMenuStatus } from './actions.js';
const store = createStore(reducer, composeWithDevTools());
const render = () => {
console.dir(store.getState());
};
store.subscribe(render);
render();
export default store;
Index.js (starting File):
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store.js';
import './index.css';
import App from './components/App.js';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>
, document.getElementById('root'));
registerServiceWorker();
Finally Component (this passes the state to a sub-component):
import React from 'react'
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { setDrawerPopOutMenuStatus } from "../actions";
class App extends React.Component {
// Redux Drawer State (Toggle PopOut Menu)
drawerPopOutHandle = () => {
this.props.drawerPopOutUpdated();
}
// PreLoad Actions (eg: make action run once to start with)
componentDidMount() {
this.props.drawerPopOutUpdated()
}
render() {
return (
<LeftDrawerMenu drawerStatus={this.props.drawerStatus}/>
)
}
}
App.propTypes = {
drawerStatus: PropTypes.bool
};
const mapStateToProps = (state) => {
console.log('drawer status: '+state.setDrawerPopOutMenuStatus);
return {
drawerStatus: state.setDrawerPopOutMenuStatus
}
}
const mapDispatchToProps = (Dispatch) => {
return({
drawerPopOutUpdated: () => Dispatch(setDrawerPopOutMenuStatus)
})
}
export default connect(mapStateToProps, mapDispatchToProps)(App);
Why don't you make action as a const like below? Also storing states using object not a single value would be much convenient.
action.js
/*Action*/
export const DRAWER_POPOUT_MENU_STATUS = 'DRAWER_POPOUT_MENU_STATUS';
/*Action Creator*/
export const setDrawerPopOutMenuStatus = {
type: DRAWER_POPOUT_MENU_STATUS,
}
reducers.js
import { combineReducers } from 'redux';
import { DRAWER_POPOUT_MENU_STATUS } from './action';
const initialState = {
someName: true,
};
const setDrawerPopOutMenuStatus = (state = initialState, action) => {
switch (action.type) {
case DRAWER_POPOUT_MENU_STATUS:
let newState = {};
newState['someName'] = !state.someName;
return Object.assign({}, state, newState);
default:
return state;
}
}
This makes it easier to manage later on when the project is bigger.

Resources