react-redux学习初步总结

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

a.React（把jsx编译到js需要调用一个函数, 这个函数在React叫React.createElement. 解答地址：https://segmentfault.com/q/1010000011479561，注意后面评论，查看ES6-Module),

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

巴特西

react-redux学习初步总结

最新文章

热门文章