笔记--react-redux基础步骤

使用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);
        // 将store中的数据赋值给state
        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'
// 引入Provider
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';
// 使用connect
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';
// 使用connect
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,然后去reducer处理业务逻辑
            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'){
        // 将state深度拷贝过来
        let newState = JSON.parse(JSON.stringify(state))
        // 将输入的值赋值给newState
        newState.inputValue = action.value;
        return newState
    }
    return state
}

增加删除li

dispatch派发action，然后去reducer处理增加删除逻辑
./TodoList.tsx

import React from 'react'
import { View } from '@tarojs/components';
// 使用connect
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,然后去reducer处理业务逻辑
            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'){
        // 将state深度拷贝过来
        let newState = JSON.parse(JSON.stringify(state))
        // 将输入的值赋值给newState
        newState.inputValue = action.value;
        return newState
    }
    // 增加li
    if (action.type === 'add_item') {
        // 将state深度拷贝过来
        let newState = JSON.parse(JSON.stringify(state))
        newState.inputValue && newState.list.push(newState.inputValue)
        newState.inputValue=''
        return newState
    }
    // 点击删除
    if (action.type === 'delete_item') {
        // 将state深度拷贝过来
        let newState = JSON.parse(JSON.stringify(state))
        newState.list.splice(action.index, 1)
        return newState
    }
    return state
}