The state of your whole application is stored in an object tree within a single-store
The only way to change the state is to emit an action, an object describing what happened
Reducer must return new state object, instead of mutating(modifying) the previous state
import { createStore } from "redux";
Where the data is saved
const store = createStore(Reducer);
The only function to change data
- The default value of State is start value (It will change after first execute)
- Using Switch with action is the best usage
const Reducer = (state = 0, action) => {
switch (action.type) {
case ADD:
return state + 1;
case MINUS:
return state - 1;
default:
return state;
}
};
store.dispatch({ type: "type" }) : Sending type to store as action
- Parameter of dispatch must be Object and have type in Object (can't be another name)
- Instead of using String as a type value, use variable to prevent misspelling mistake
const ADD = "ADD";
const handleAdd = () => {
countStore.dispatch({ type: ADD });
};
// Usage
plus.addEventListener("click", handleAdd); // plus is button element
store.subscribe(function) : Execute funtion whenever state of store is updated
const onChange = () => {
number.innerText = countStore.getState(); // number is span element
};
countStore.subscribe(onChange);
Most code related to creating Store is same with pure Redux
// Store.js
import { createStore } from "redux";
const store = createStore(reducer);
export default store;
// Index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
import { Provider } from "react-redux";
import store from "./Store";
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
);
// App.js
import React from "react";
import Home from "../routes/Home";
function App() {
return (
<Router>
<Route path="/" exact component={Home}></Route>
</Router>
);
}
export default App;
- mapStateToProps(state, ownProps)
- The function to return data of store to connected component as props
- The function for selecting the part of data from store
- mapDispatchToProps(dispatch, ownProps)
- The function to return data of store to connected component as props
- The function for dispatching actions to store
- connect(mapStateToProps, mapDispatchingToProps)(component)
- The function to connect react component to Redux store
Below Code is written only for explaining Redux!
Don't copy and paste on your code
// Home.js
import { connect } from "react-redux";
import { actionCreators } from "../Store";
import ToDo from "../components/ToDo";
function Home({ toDos, addToDo }) {
function onSubmit(e) {
e.preventDefault();
addToDo(text);
}
return (
<>
<h1>To Do</h1>
<form onSubmit={onSubmit}> ~~ </form>
<ul>
{toDos.map(toDo => (
<ToDo {...toDo} key={toDo.key} />
))}
</ul>
</>
);
}
function mapStateToProps(state, ownProps) {
return { toDos: state };
}
function mapDispatchToProps(dispatch, ownProps) {
return {
addToDo: text => dispatch(actionCreators.addToDo(text))
};
}
export default connect(mapStateToProps, mapDispatchToProps)(Home);
// ToDo.js
function ToDo({ ~~ }) {
return <li> ~~ </li>;
}
// ~~
// Store.js
const addToDo = text => {
return { ~~ };
};
const deleteToDo = id => {
return { ~~ };
};
export const actionCreators = {
addToDo,
deleteToDo
};