使用react-redux的基础步骤
-首先创建store
store/index.tsx
import {createStore} from 'redux';
import { reducer } from "./reducer";
const store = createStore(reducer);
export default store;
-然后初始化reducer
store/reducer.tsx
const defaultState = {
inputValue: 'hello world!',
list: []
}
export default (state = defaultState, action)=>{
return state
}
-将store引入到TodoList.tsx文件中
TodoList.tsx
import React from 'react'
import { Text, View } from '@tarojs/components';
import store from '../../store'
interface TodoListProps {
}
interface TodoListState {
inputValue: string,
list: any,
}
class TodoList extends React.Component<TodoListProps, TodoListState> {
constructor(props: TodoListProps) {
super(props);
this.state = store.getState()
}
render() {
return (<View>
<input value={this.state.inputValue}></input>
<button>提交</button>
<View>
<ul>
<li>ssss</li>
</ul>
</View>
</View>);
}
}
export default TodoList;
react-redux中的Provider(提供器)和Connect(连接器)
-引入提供器Provider,使用提供器包裹要使用store的组件
index.tsx
import { Component } from 'react'
import { View, Text } from '@tarojs/components'
import './index.scss'
import TodoList from './TodoList'
import { Provider } from 'react-redux'
import store from '../../store'
export default class Index extends Component {
componentWillMount () { }
componentDidMount () { }
componentWillUnmount () { }
componentDidShow () { }
componentDidHide () { }
render () {
return (
<View className='index'>
<Provider store={store}>
<TodoList />
</Provider>
</View>
)
}
}
-使用连接器connect,在组件中使用连接器将store映射成组件的props属性
TodoList.tsx
import React from 'react'
import { View } from '@tarojs/components';
import {connect} from 'react-redux'
interface TodoListProps {
inputValue: string,
list: any,
}
interface TodoListState {
}
class TodoList extends React.Component<TodoListProps, TodoListState> {
constructor(props: TodoListProps) {
super(props);
}
render() {
return (<View>
<input value={this.props.inputValue}></input>
<button>提交</button>
<View>
<ul>
<li>ssss</li>
</ul>
</View>
</View>);
}
}
const stateToProps = (state)=>{
return {
inputValue: state.inputValue
}
}
export default connect(stateToProps,null)(TodoList);
修改state的值
-修改state的值,首先将方法映射到props属性里面,使用dispatch派发action,然后去reducer处理业务逻辑
TodoList.tsx
import React from 'react'
import { View } from '@tarojs/components';
import {connect} from 'react-redux'
interface TodoListProps {
inputValue: string,
list: any,
}
interface TodoListState {
}
class TodoList extends React.Component<TodoListProps, TodoListState> {
render() {
return (<View>
<input value={this.props.inputValue} onChange = {this.props.inputChange}></input>
<button>提交</button>
<View>
<ul>
<li>ssss</li>
</ul>
</View>
</View>);
}
}
const stateToProps = (state)=>{
return {
inputValue: state.inputValue
}
}
const dispatchToProps = (dispatch) => {
return {
inputChange(e){
let action = {
type: 'change_input',
value: e.target.value
}
dispatch(action)
}
}
}
export default connect(stateToProps,dispatchToProps)(TodoList);
-在reducer中处理业务逻辑,并将处理后的newState返回出去
store/reducer.tsx
const defaultState = {
inputValue: 'hello world!',
list: []
}
export default (state = defaultState, action)=>{
if(action.type==='change_input'){
let newState = JSON.parse(JSON.stringify(state))
newState.inputValue = action.value;
return newState
}
return state
}
增加删除li
dispatch派发action,然后去reducer处理增加删除逻辑
./TodoList.tsx
import React from 'react'
import { View } from '@tarojs/components';
import {connect} from 'react-redux'
interface TodoListProps {
inputValue: string,
list: any,
}
interface TodoListState {
}
class TodoList extends React.Component<TodoListProps, TodoListState> {
render() {
return (<View>
<input value={this.props.inputValue} onChange = {this.props.inputChange}></input>
<button onClick={this.props.clickButton}>提交</button>
<View>
<ul>
{
this.props.list.map((item, index) => {
return (
<li key={index} onClick={()=>{this.props.deleteItem(index)}}>{item}</li>
)
})
}
</ul>
</View>
</View>);
}
}
const stateToProps = (state)=>{
return {
inputValue: state.inputValue,
list: state.list
}
}
const dispatchToProps = (dispatch) => {
return {
inputChange(e){
let action = {
type: 'change_input',
value: e.target.value
}
dispatch(action)
},
clickButton(){
let action = {
type: 'add_item',
}
console.log(1111);
dispatch(action)
},
deleteItem(index){
let action = {
type: 'delete_item',
index: index
}
console.log(index);
dispatch(action)
}
}
}
export default connect(stateToProps,dispatchToProps)(TodoList);
reducer处理增加删除逻辑
./store/reducer
const defaultState = {
inputValue: 'hello world!',
list: []
}
export default (state = defaultState, action)=>{
if(action.type==='change_input'){
let newState = JSON.parse(JSON.stringify(state))
newState.inputValue = action.value;
return newState
}
if (action.type === 'add_item') {
let newState = JSON.parse(JSON.stringify(state))
newState.inputValue && newState.list.push(newState.inputValue)
newState.inputValue=''
return newState
}
if (action.type === 'delete_item') {
let newState = JSON.parse(JSON.stringify(state))
newState.list.splice(action.index, 1)
return newState
}
return state
}