We Keep Coding

'Redux' is not defined ... as well as ReactRedux and ReactDOM

I am working through the React/Redux exercise on FreeCodeCamp.org. After finishing the exercise I want to take it a step farther by implementing it on a local host, and then deploying it to github.
So far, I've used npx create-react-app {appname} in node. Replaced, the original app.js file with my own code that I have below and tried to locally host with npm start on Node.
When that didn't work I did some googling and found the following command to install redux npm install redux react-redux redux-thunk --save. when that didn't work I tried adding the fourth line of my code import { createStore } from 'redux';
Currently I am facing the current error
What can I do to get my app to locally host, so I can then move on to the next step of deploying it to Github?
import React from 'react';
import logo from './logo.svg';
import './App.css';
import { createStore } from 'redux';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
// Redux:
const ADD = 'ADD';
const addMessage = (message) => {
return {
type: ADD,
message: message
}
};
const messageReducer = (state = [], action) => {
switch (action.type) {
case ADD:
return [
...state,
action.message
];
default:
return state;
}
};
const store = Redux.createStore(messageReducer);
// React:
const Provider = ReactRedux.Provider;
const connect = ReactRedux.connect;
// Change code below this line
class Presentational extends React.Component {
constructor(props) {
super(props);
this.state = {
input: '',
messages: []
}
this.handleChange = this.handleChange.bind(this);
this.submitMessage = this.submitMessage.bind(this);
}
handleChange(event) {
this.setState({
input: event.target.value
});
}
submitMessage() {
this.setState({
input: '',
messages: this.state.messages.concat(this.state.input)
});
}
render() {
return (
<div>
<h2>Type in a new Message:</h2>
<input
value={this.state.input}
onChange={this.handleChange}/><br/>
<button onClick={this.submitMessage}>Submit</button>
<ul>
{this.state.messages.map( (message, idx) => {
return (
<li key={idx}>{message}</li>
)
})
}
</ul>
</div>
);
}
};
// Change code above this line
const mapStateToProps = (state) => {
return {messages: state}
};
const mapDispatchToProps = (dispatch) => {
return {
submitNewMessage: (message) => {
dispatch(addMessage(message))
}
}
};
const Container = connect(mapStateToProps, mapDispatchToProps)(Presentational);
class AppWrapper extends React.Component {
render() {
return (
<Provider store={store}>
<Container/>
</Provider>
);
}
};
ReactDOM.render(<AppWrapper/>, document.getElementById("root"))

you didn't import them;
import ReactDOM from 'react-dom';
import Redux from 'redux';
import ReactRedux from 'react-redux';
by the way there is a cleaner way to import what you need. you will need a little refactoring for that:
import {render} from 'react-dom';
import {Provider, createStore} from 'redux';
import {connect} from 'react-redux';
you get the idea, instead of importing the default export, you import selectively and in your code just use the named import instead of default.name
(e.g.
ReactDOM.render(<AppWrapper/>, document.getElementById("root")) becomes
render(<AppWrapper/>, document.getElementById("root"))
Check out this SO answer for further reading

Iterate through ReactJS components onClick

The goal is have this functionally work as a slider/slideshow.
Example Modal Components:
import React, { Component } from 'react';
const Modal_1 = () => {
return (
<li id="intro-res-slide" class="active">
<div>
<h2>Hi Im Mariah</h2>
</div>
</li>
)
}
export default Modal_1;
Presentational Component:
import React, { Component } from 'react';
import {
BrowserRouter as Router,
Link,
Route,
Switch,
} from 'react-router-dom';
// Modals
import Modal_1 from "./modals/Modal_1.js"
import Modal_2 from "./modals/Modal_2.js"
import Modal_3 from "./modals/Modal_3.js"
import Modal_4 from "./modals/Modal_4.js"
import Modal_5 from "./modals/Modal_5.js"
const _modals = [ Modal_1, Modal_2, Modal_3, Modal_4, Modal_5 ]
const HelperModalRender = (props) => (
<div class="tool-slides active slideshow">
<ul>
{/* ITERATE THROUGH MODALS HERE */}
{ _modals[props.currentSlide] }
</ul>
<div
onClick={props.prevModal}
className="btn dec"
></div>
<div
className="btn inc"
onClick={props.nxtModal}
></div>
</div>
)
export default HelperModalRender;
Container Component:
import React, { Component } from 'react';
import {
BrowserRouter as Router,
Link,
Route,
Switch,
} from 'react-router-dom';
import HelperModalRender from './HelperModalRender.js'
class HelperModalContainer extends Component {
constructor() {
super();
this.state = {
currentSlide: 1,
slideActive: true
}
this.prevModal = this.prevModal.bind(this)
this.nxtModal = this.nxtModal.bind(this)
}
prevModal(){
var currentSlide = this.state.currentSlide
this.setState({ currentSlide: currentSlide++ })
}
nxtModal(){
var currentSlide = this.state.currentSlide
this.setState({ currentSlide: currentSlide-- })
}
render() {
return (
<HelperModalRender
active = {this.state.slideActive}
currentSlide = {this.state.currentSlide}
prevModal = {this.state.prevModal}
nxtModal = {this.state.nxtModal}
/>
)
}
}
export default HelperModalContainer;
I was hoping to have a function in my container component that would iterate through the _modals array, returning the corresponding component - but a switch statement is not an option and I'm having trouble thinking of an alternative.

This should work, but it looks like your container component's render method has a typo. Try changing HelperModalRender's currentSlide prop to:
currentSlide = {this.state.currentSlide}
You may also need to start the slides at zero instead of 1, to match the array index of the slide components.

realized the issue lied in this warning:
This may happen if you return a Component instead of <Component /> from render.
so I updated the _modals array to:
const _modals = [ <Modal_1 />, <Modal_2 />, <Modal_3 />, <Modal_4 />, <Modal_5 /> ]

Why doesn't action fire in my react\redux app?

Currently, I'm working on a small application that utilizes modals. I don't want to use 'ready-to-use' packages like react-modal and instead decided to try to do it on my own.
1) A reducer in src/reducers/modalReducer.js
const modalReducer = (state = {
show: true,
}, action) => {
switch (action.type) {
case 'TOGGLE_MODAL':
console.log('reducer worked out')
state = {...state, show: !state.show }
break
default:
return state
}
}
export default modalReducer
My reducers/index.js
import { combineReducers } from 'redux'
import modalReducer from './modalReducer'
const reducers = combineReducers({
modal: modalReducer
})
export default reducers
2) A store in src/store.js
import { createStore } from 'redux'
import reducer from './reducers/index'
export default createStore(reducer)
3) A Modal component in src/components/Modal.js. I want this component to be reusable and contain input forms which I'll add later.
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { toggleModal } from '../actions/index'
import { bindActionCreators } from 'redux'
import '../css/Modal.css'
class Modal extends Component {
render () {
if(!this.props.show) {
return (<h1>FUC YOU</h1>)
}
console.log('HELLLO' + this.props.show)
return (
<div className='backdrop'>
<div className='my-modal'>
<div className='footer'>
<button className='close-btn' onClick={ () => toggleModal }>
X
</button>
</div>
<h1>{ this.props.title }</h1>
<hr/>
<div>
{ this.props.contents }
</div>
</div>
</div>
)
}
}
const mapStateToProps = (state) => {
return { show: state.modal.show }
}
const mapDispatchToProps = (dispatch) => {
return {
toggleModal: () => dispatch(toggleModal())
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Modal)
My problem is that when I'm pressing the button x, in my modal nothing happens. It means that I did something wrong when was dispatching actions, but I have no idea what I missed...
At this point I just want my empty modal to be closed when the x button is pressed.
In my index.js I have the following structure:
import React from 'react'
import ReactDOM from 'react-dom'
import registerServiceWorker from './registerServiceWorker'
import { BrowserRouter } from 'react-router-dom'
import { Provider } from 'react-redux'
import store from './store.js'
import App from './components/App'
ReactDOM.render(
<Provider store = {store} >
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
, document.getElementById('root'))
registerServiceWorker()
My Modal component is within App

You're not actually calling the toggleModal() action creator. In addition, you're referencing the imported function, not the function you're getting as props:
onClick={ () => toggleModal }
The immediate fix would be: onClick={ () => this.props.toggleModal() }.
Having said that, there's two other ways you can improve this code.
First, you can pass toggleModal directly as the handler for onClick, like:
onClick={this.props.toggleModal}
Second, you can replace the mapDispatch function by using the "object shorthand" syntax supported by connect:
import {toggleModal} from "../actions";
const actions = {toggleModal};
export default connect(mapState, actions)(Modal);
Beyond that, I'd encourage you to read my post Practical Redux, Part 10: Managing Modals and Context Menus, which specifically shows how to implement modal dialogs using React and Redux, and points to additional resources on the topic.

Uncaught Error: Could not find "store" in either the context or props of Connect(Form())

I'am using redux, react-router-redux and redux-form in my code. Code has a Provider, Connected router and Mini component. Mini component includes Switch and some components, which depends on route.
Index.js
...
import { Provider } from 'react-redux'
import { ConnectedRouter, routerMiddleware } from 'react-router-redux'
import createBrowserHistory from 'history/createBrowserHistory'
import Reducers from './reducers'
const history = createBrowserHistory({ basename: 'mini' })
const middlewareRouter = routerMiddleware(history)
const store = createStore(Reducers, applyMiddleware(middlewareRouter))
render(<Provider store={store}>
<ConnectedRouter history={history}>
<Mini/>
</ConnectedRouter>
</Provider>, document.getElementById('root'))
Mini.js
import React, { Component } from 'react'
import { Switch, Route } from 'react-router-dom'
...
import NavigationContainer from './containers/navigation'
import CategoryContainer from './containers/category'
class Mini extends Component {
render () {
return (<main>
<Switch>
<Route path="/navigation" component={NavigationContainer}/>
<Route path="/category" component={CategoryContainer}/>
...
</Switch>
<LoadContainer/>
<div id="form"></div>
</main>)
}
}
All components in Switch section has a button. Clicking on the button can render a form.
...
import FormCreate from './formcreate'
class Topbar extends Component {
constructor (props) {
super(props)
this.handleClickCreate = this.handleClickCreate.bind(this)
}
handleClickCreate (e) {
e.preventDefault()
render(<FormCreate/>, document.getElementById('form'))
}
...
}
But when I click on button error appear Uncaught Error: Could not find "store" in either the context or props of "Connect(Form(FormCreate))"
How can I fix the problem? Thanks in advance!
PS Reducers.js
import { combineReducers } from 'redux'
import { routerReducer as reducerRouter } from 'react-router-redux'
import { reducer as reducerForm } from 'redux-form'
const Reducers = combineReducers({
...
router: reducerRouter,
form: reducerForm
})
PSS FormCreate.js
import React from 'react'
import { Field, reduxForm } from 'redux-form'
...
const FormCreate = (props) => {
const { error, handleSubmit, pristine, reset, submitting } = props
return (
...
)
}
export default reduxForm({
form: 'create',
validate
}) (FormCreate)

I think the problem here is that you are trying to render FormCreate create another app within html element form that does not have access to the redux store, resulting in the error that you see.
What I would do is set up a reducer that handle whether or not I should render FormCreate then render it in component in your app like in LoadContainer.
Topbar.js
class Topbar extends Component {
constructor (props) {
super(props)
this.handleClickCreate = this.handleClickCreate.bind(this)
}
handleClickCreate (e) {
e.preventDefault()
// dispatch action to reducer to tell store to display FormCreate
}
...
}
LoadContainer.js
class LoadContainer extends Component {
// ... rest of code
render() {
// get shouldDisplayForm from redux store
const { shouldDisplayForm } = this.props;
return (
//... rest of component
{ shouldDisplayForm && <FormCreate> }
);
}
}
Alternatively, if you want to render FormCreate in html element 'form', you can put the store in a file so that you can require it in many files. Then render FormCreate with Provider like what you've done Index.js.

Why Material-UI Appbar onLeftIconButtonTouchTap is not work?

Im studying React-Redux, Material-UI.
Now, Im trying to create Sample App, but not work.
I dont know how to improve my code.
I want to open Drawer , when Material-UI AppBar onLeftIconButtonTouchTap is clicked.
I cant bind my Action to Component, I think.
When following code is running, not fire onLeftIconButtonTouchTap event.
And when I change openDrawer to openDrawer(), JS error 'openDrawer is not a function' is found on Chrome Dev tool.
Header.jsx as a Component
import React, { PropTypes } from 'react';
import AppBar from 'material-ui/AppBar';
import Drawer from 'material-ui/Drawer';
const Header = ({
openDrawer,
open
}) => (
<div>
<AppBar
title='sample'
onLeftIconButtonTouchTap = {() => openDrawer}
/>
<Drawer
docked={false}
open={open}
/>
</div>
)
Header.PropTypes = {
openDrawer: PropTypes.func.isRequired,
open: PropTypes.bool.isRequired
}
export default Header;
HeaderContainer.jsx as a Container
import React from 'react';
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux';
import { header } from '../actions'
import Header from '../components/Header';
const mapStateToProps = (state) => ({open});
const mapDispatchToProps = (dispatch) => (
{openDrawer: bindActionCreators(header, dispatch)}
);
const HeaderContainer = connect(
mapStateToProps,
mapDispatchToProps
)(Header);
export default HeaderContainer;
App.jsx as a RootComponent
import React, { Component, PropTypes } from 'react';
import Header from '../components/Header';
import injectTapEventPlugin from "react-tap-event-plugin";
import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
injectTapEventPlugin();
class App extends Component {
constructor(props) {
super(props);
}
getChildContext() {
return { muiTheme: getMuiTheme(baseTheme) };
}
render() {
return (
<div>
<Header />
{this.props.children}
</div>
);
}
};
App.childContextTypes = {
muiTheme: React.PropTypes.object.isRequired,
};
export default App;
Thanks in advance.

You are not binding the function correctly. You need to update your code to
<AppBar
title='sample'
onLeftIconButtonTouchTap = { openDrawer.bind(this) }
/>
More about .bind() method here: Use of the JavaScript 'bind' method