react-redux学习初步总结

Posted 2020-10-30 nailc

1.index.js文件中需要引入

a.React（把jsx编译到js需要调用一个函数, 这个函数在React叫React.createElement. 解答地址：https://segmentfault.com/q/1010000011479561),

b.ReactDOM，

c.要渲染的总组件。

示例如下：

//index.js
import React from "react";
import ReactDOM from ‘react-dom‘;
import App from "./page/todoListRedux/app"
ReactDOM.render(<App />,document.getElementById("root"))

2.总组件中需要引入

a.React,{Component,Fragment}(Fragment页面不会渲染的包含块)

b.引入store所在位置

c.{Provider}:相当于store所作用的范围容器

d.子组件所在位置

并将总组件暴露给index

示例如下：

//app.js
import React, { Component, Fragment } from "react";
import store from "./store/store";
import { Provider } from "react-redux";

import Input from "./component/input";

export default class App extends Component {
    render() {
        return (
            <Provider store={store}>
                <Fragment>
                    <Input />
                </Fragment>
            </Provider>      
        )
    }
}

3.store.js中需要引入

a.创建store的方法{createStore}

b.对redux的dispacth方法进行封装的方法applyMiddleware

c.rudecer（设计数据结构和actions处理）

d.thunk 实现异步action

将store暴露给总组件app.js

代码示例如下：

import { createStore, applyMiddleware } from "redux";
import reducers from "./reducers";
// import logger from "redux-logger";
import thunk from "redux-thunk";

// console.log(logger,thunk)
// import { addTodo,changeCompleted } from "./actions"
// redux-thunk实现异步action
// redux-logger是redux得日志中间件
const store = createStore(reducers,applyMiddleware(thunk))
export default store

4.actions.js

a.用变量代替action字符串

b.action接收的参数返回出去，传递给reducers

c.将action暴露给子组件（即：用户具体的操作行为）

示例如下：

export const ADD_TODO = "ADD_TODO";
export function addTodoAction({id,text}) {
    return {
        type: ADD_TODO,
        text,
        id
    }
}

5.reduers.js

a.引入合并处理action方法的方法：combineReducers

b.定义state数据结构

c.定义function,根据用户操作，dispatch过来的action中的type对state数据中的具体的数据进行操作

d.合并function，将其放入reducers(注：只有合并以后的function在子组件中才能获取到)

e.将reducers暴露给store

代码示例如下：

import { combineReducers } from "redux";
const initdata = {
    todoList: [{
        id: 0,
        text: "html",
        completed: true
    }, {
        id: 1,
        text: "CSS",
        completed: false
    }, {
        id: 2,
        text: "JS",
        completed: true
    }, {
        id: 3,
        text: "NodeJs",
        completed: false
    }],
    id:4,
    showType:"All"
}
function todoList(state=initdata.todoList,action){
    // console.log(action)
    let newArr=JSON.parse(JSON.stringify(state))
    if(action.type==="ADD_TODO"){
        newArr.push({
            id:action.id,
            text:action.text,
            completed:false
        })
    }else if(action.type==="COMPLETED_TODO"){
        newArr.map((item)=>{
            if(item.id===action.id){
                item.completed=!item.completed
            }
            return item
        })
    }
    return newArr
}
const reducers=combineReducers({
    todoList,id,showType
})
export default reducers;

6.子组件

a.引入React，{Component}

b.引入connect（连接ruducers里面的数据）

c.引入actions.js中的用户操作行为方法

d.定义组件名称,从this.props中获取自己需要的方法/数据(或参数),并根据用户行为触发不同的action，通过dispatch来对数据进行相应操作

e.连接reducers，并从中获取需要的数据放入this.props中

代码示例如下：

import React, { Component, Fragment } from "react";
import {connect} from "react-redux";
import styles from "../static/style.css"
import {changeCompleted} from "../store/actions"

class List extends Component {

    render() {
        const {dispatch,showType}=this.props
        let list=this.props.todoList.filter((item)=>{
            if(showType==="All"){
                return item
            }else if(showType==="WillDo"){
                return item.completed===false
            }else if(showType==="Did"){
                return item.completed===true
            }
        })
        return (
                <Fragment>
                    <ul>
                        {
                            list.map((item,index)=>{
                                return <li key={index} 
                                className={styles[item.completed?‘active‘:""]}
                                onClick={()=>{
                                    // console.log(item.id)
                                    dispatch(changeCompleted(item.id))
                                }}
                                >{item.text}</li>
                            })
                        }
                    </ul>
                </Fragment>
        )
    }
}
export default connect(function(state){
    return state
})(List)

初步总结：react-redux的初步使用体验

github：https://github.com/aliAjax/reactTodoListReduxDemo.git

包含了不用redux的todoList Demo