React Redux-saga 与 react-dedux

周大胖子 · 发表于 2020-9-9 16:02:56

Redux-saga 中间件的使用 [异步处理数据 ,和 redux-thunk 的意义一样，
中间件是redux 的中间件主要是处理action 和 store 之间的关系]

react-redux

安装“react-redux”
npm install react-redux

react-redux 的核心API

index.js【最主要的那个】代码：

import React feom 'react';
import ReactDom from 'react-dom';
import TodoList from './TodoList';
//这是react-redux核心API 在此模块内的子组件,如果 Provider与stor 做了关联，
// 则此模块内的模块都能调用 store
import { Provider } from 'react-redux';
import store from './store';
const App = (
// 就是这要做关联的
<Provider store ={store}>
<TodoList></TodoList>
</Provider>
);
ReactDom.render(APP,document.getElementByTd('root));

复制代码

Todolist.js组件代码

import React feom 'react';
import store from './store';
// 这是在react-redux 用于接收 Provider 中store 的API
import { connect } from 'react-redux';
class TodoList extends Component{
// 以前在 constructor(props) 中接收store ，用了react-redux现在不用
render(){
return (
<div>
<div>
<input value={this.props.inputValue}/>
<button>提交</button>
</div>
<ul>
<li>哈哈哈</li>
</ul>
</div>
)
}
}
// 链接的方式 [意思：把store 中的组件映射到 props上]
// 所以在render 中,来自store 的数据就得写成 this.props.inputValue
const mapStateToProps = (state)=>{
return {
inputValue :state.inputValue
}
}
// 在搞一个处理函数，是处理store中的数据的函数
const mapDispatchToProps = (dispatch) ={
return {
changeInputValue(e)
{
const action = {
type:'change_input_value',
value: e.target.value
}
dispatch(action);
}
}
}
// 重点在这 connect链接 [参数1 链接方式, 参数2 处理 store 内数据的函数]
export default connect(mapStateToProps,mapDispatchToProps)(TodoList);

复制代码