Created
October 19, 2018 08:13
-
-
Save redknitin/503661966123d4868912e65d6f9b7a6b to your computer and use it in GitHub Desktop.
Redux React Starter
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component } from 'react'; | |
import './App.css'; | |
import { BrowserRouter, Route, Link } from 'react-router-dom'; | |
import Home from './components/Home' | |
class App extends Component { | |
render() { | |
return ( | |
<BrowserRouter> | |
<Route exact path="/" component={Home} /> | |
</BrowserRouter> | |
); | |
} | |
} | |
export default App; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// components/Home.js | |
import React, { Component } from 'react'; | |
import { connect } from 'react-redux'; | |
import { BrowserRouter, Route, Link } from 'react-router-dom'; | |
class Home extends Component { | |
render() { | |
return <div> | |
Welcome! | |
</div> | |
} | |
} | |
function mapHomeStateToProps(state) { | |
return { | |
//data: null //state.Home.data, | |
}; | |
} | |
function mapHomeDispatchToProps(dispatch) { | |
return { //TODO: Change this | |
//loadData: (json) => dispatch({type: 'LIST_TASK', payload: json}), | |
}; | |
} | |
export default connect(mapHomeStateToProps, mapHomeDispatchToProps)(Home); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import ReactDOM from 'react-dom'; | |
import App from './App'; | |
import * as serviceWorker from './serviceWorker'; | |
import { Provider } from 'react-redux'; | |
import { createStore } from 'redux' | |
import RootReducer from './reducers/RootReducer'; | |
ReactDOM.render( | |
<Provider store={createStore(RootReducer)}> | |
<App /> | |
</Provider>, | |
document.getElementById('root') | |
); | |
// If you want your app to work offline and load faster, you can change | |
// unregister() to register() below. Note this comes with some pitfalls. | |
// Learn more about service workers: http://bit.ly/CRA-PWA | |
serviceWorker.unregister(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// reducers/MyReducer | |
function MyReducer(state = [], action) { | |
switch(action.type) { | |
default: | |
return state; | |
} | |
} | |
export default MyReducer; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// reducers/RootReducer.js | |
import { combineReducers } from 'redux'; | |
import MyReducer from './MyReducer'; | |
export default combineReducers({ | |
MyReducer, | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
npx create-react-app myapp | |
cd myapp | |
npm install redux react-redux react-router-dom |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment