作用
React-Redux 将Redux store注入全局,React-Redux是增强Redux,不是一个新的独立的模块,运行要依赖Rudex
使用
搭建redux,暴露store
将状态写入全局( Provider)
main.js引入
使用模块下面 Provider可以将store传递给包裹的所有的子元素
import {Provider} from "react-redux";
import store from "./store";
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root'));
组件react-redux
在App.jsx引入
import {connect} from "react-redux";
class App extends Component {
render() {
console.log(this)
return (
<div>
<h2>{this.props.n}</h2>
<button onClick={this.props.handleAdd.bind(this)}>修改数据</button>
</div>
);
}
}
//定义属性
const mapStateToProps = (state)=>({
num:state.num
})
//定义方法
const mapDispatchToProps = (dispatch)=>({
handleAdd(){z
let action = {
type:"NUM_ADD"
}
dispatch(action);
}
})
//connect 传入两个人参数
//mapStateToProps 一个是state映射
//mapDispatchToProps 一个是action映射
//不是固定写法但是推荐这样写
//connect 是一个高阶组件
export default connect(mapStateToProps,mapDispatchToProps)(App);
模拟高阶组件调用
//简化1
const headerHoc = (num1)=>(num1)=> {
return num1 +num1;
}
//简化2
const headerHoc = (num1)=>{
return (num2)=> {
return num1 +num2;
}
}
console.log(headerHoc(1)(2))
发现一个问题
数据改变,视图不更新的问题,尝试使用深度拷贝实现
完美解决吗?没有年轻人! 开启Redux之immutable 终章之战
const defaultState = {
num:10
}
const store= (state=defaultState,action)=>{
var testState={...state};
switch(action.type){
case "NUM_ADD":
let newTest=JSON.parse(JSON.stringify(state));
return newTest.num++;
default:
return state;
}
}
export default store;
