【react】create-react-app配置redux

一、安装

npm i redux react-redux -s

二、初始化store

1. 在index.js中引入redux中的createStore

import {createStore} from 'redux';

2. 在index.js中使用createStore创建store

const store = createStore(/* 后面加入 */)

3. 在src中创建reducers（减速器）文件夹，并创建rootReducer.js文件

4. 在rootReducer.js中添加如下代码：

// 初始化state
const initState = {
  posts: []
}

// 创建rootReducer函数，接受两个值，第一个值为状态(如果不初始化state，那么state的初始值为underfunded)，第二个值为状态，
const rootReducer = (state = initState, action) => {
  // reducer的作用就是返回新的状态值
  return state
}

// 输出rootReducer组件
export default rootReducer;

 5. 在index.js中引入rootReducer组件，并把这个组件添加到store中

//引入rootReducer组件
import rootReducer from './reducers/rootReducer'
//将组件添加到store中
const store = createStore(rootReducer)

三、引入react-redux中的{Provider}将App进行包裹，并将store赋给Provider将store和组件进行关联

import { Provider } from 'react-redux'

 四、映射state到props

1. 引入react-redux中的connect组件，将数据与组件进行连接

import {connect} from 'react-redux'

2. 将rootReducer.js中的posts的值修改如下：

  posts: [
    {id:'c1',title:'标题一',content:'内容一'},
    {id:'c2',title:'标题二',content:'内容二'},
    {id:'c3',title:'标题三',content:'内容三'}
  ]

3.修改页面中的export default如下：

const mapStateToProps = (state) => {
    return {
        posts: state.posts
    }
}

export default connect(mapStateToProps)(About)