*Redux is a predictable state container for JavaScript apps.
It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. *
Redux 是一个状态容器,独立于app之外有自己的环境
library for use redux in react
npm install react-redux
redux library
npm install redux
- import :
import {createStore} from "redux"
- reducer:
const initialState = {count: 0}; function reducer (state = initialState, action) { switch(action.type){ case "increment": return { count: state.count + 1 } case "decrement": return { count: state.count -1} default: return state } }
- store:
const store = createStore(reducer)
- case:
const increment = {type:"increment"} const decrement = {type: "decrement"}
- dispatch
function Counter (){ return <div> <button onClick={()=> {store.dispatch(increment)}}>+</button> <span>{store.getState().count}</span> <button onClick={()=> {store.dispatch(decrement)}}>-</button> </div> }
- render & update
store.subscribe(()=>{ root.render( <Counter /> ); }) root.render( <Counter /> );