Redux-----React的好搭档!
Redux
1.数据传递
1.props
2.回调
3.相邻兄弟元素传递数据
2.描述
Redux 是 JavaScript 状态容器，提供可预测化的状态管理。
3.启示
Redux 由 Flux 演变而来，但受 Elm 的启发，避开了 Flux 的复杂性。
4.安装：
npm install --save redux
npm install --save react-redux
npm install --save-dev redux-devtools
附加：debugger
5.要点
store:仓库
actions:动作(事件)
state:状态
reducers:描述动作(事件),修改状态的地方
6.实现React-Redux
store:
import { createStore } from 'redux'
import userinfo from "../reducers/userinfo"
export default function configureStore(){
const store = createStore(userinfo);
return store;
}
reducers:
const initState = {};
export default function userinfo(state = initState, action) {
switch (action.type) {
case "LOGIN":
return state = action.data;
case "UPDATE":
return state = action.data;
default:
return state
}
}
import { combineReducers } from "redux"
import userinfo from "./userinfo"
const rootReducer = combineReducers({
userinfo
})
export default rootReducer
actions:
export function login(data){
return{
type:"LOGIN",
data
}
}
export function update(data){
return{
type:"UPDATE",
data
}
}
7.关联Redux
index.js
import { Provider } from "react-redux"
import configureStore from "./configureStore/configureStore"
const store = configureStore();
ReactDOM.render(
<Provider store={ store }>
<App />
</Provider>
, document.getElementById('root'));
App.js
import { connect } from "react-redux"
import { bindActionCreators } from "redux"
import * as actionsType from "../../actions/userinfo"
componentDidMount(){
// 调用redux中actions的方法
this.props.actionsType.login({
nick:"iwen",
age:20
})
}
function mapStateToProps(state){
return{
userinfo:state.userinfo
}
}
// 写
function mapDispatchToProps(dispatch){
return{
actionsType:bindActionCreators(actionsType,dispatch)
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(App);
