React-使用react-redux

  • Z时代
  • 2024-01-10
  • 分类：综合

react

　　react-redux可以方便在react中使用redux,我们就可以忘记subscribe,只需要记住reducer，action和dispatch就可以了。react-redux提供Provider和connect两个接口。

  • Provider组件应该在应用最外层，传入store即可，只用一次。

  • Connect负责从外部获取组件需要的参数。

  • Connect可以用装饰器的方式来写。

创建stroe的时候，把原本的<Todolist/>包裹在Provider里。

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import TodoList from './TodoList.js';
//定义一个组件，就是一段jsx
//Provider 链接了store，那么Provider里所有的组件，也都能获取到store里的内容
const App = (
	<Provider store={store}> 
		<TodoList/>
	</Provider>
);
ReactDOM.render(App, document.getElementById('root'));

在组件里导出组件的时候换种写法，要用connect。理解为让TodoList与store做链接,逻辑规则在mapStateToProps和mapDispatchToProps里定，TodoList是个ui组件，导出的是个普通组件。

mapStateToProps：mapStateToProps把store里的数据映射到组件里，变成组件的props。它接受一个state做参数，返回一个对象。

mapDispatchToProps：把store.dispatch方法映射到props上，变成组件的props。它接受接受一个dispatch 做参数，返回一个对象

import React  from 'react';
import { connect } from 'react-redux';
const TodoList=(props)=>{
  const { inputValue , changeInpuValue ,btnClick , list , itemDelete}=props;
    return(
      <div>
        <input type="text" value={inputValue} onChange={changeInpuValue}/>
        <button onClick={btnClick}>提交</button>
        <ul>
          {
            list.map((item,index)=>{
              return <li key={index} onClick={itemDelete}>{item} </li>
            })
          }
        </ul>
      </div>
    );
};
/*mapStateToProps把store里的数据映射到组件里，变成组件的props,接受一个state做参数，返回一个对象*/
const mapStateToProps=(state)=>{
  return{
    inputValue:state.inputValue,
    list:state.list
  }
}
/*store.dispatch方法挂载到props上，组件里的props如何对store做修改，接受一个dispatch 做参数，返回一个对象*/
const mapDispatchToProps=(dispatch)=>{
  return{
    changeInpuValue(e){
      const action={
        type:'change_input_value',
        value:e.target.value
      }
      dispatch(action)
    },
    btnClick(){
      const action={
        type:'btn_click'
      }
      dispatch(action)
    },
    itemDelete(e){
      console.log(e);
    }
  }
}
/*让TodoListu与store做链接,规则在mapStateToProps里边*/
export default connect(mapStateToProps,mapDispatchToProps)(TodoList);

　　

以上是 React-使用react-redux 的全部内容， 来源链接： utcz.com/z/384100.html

回到顶部