原生react和react-redux的使用和组件关联

原生react和react-redux的初使用；

第一步： 首先是安装redux 再安装react-redux;

 yarn add redux  react-redux 

第二步： 创建store文件并注册store;

   import { createStore } from 'redux';

// counter为一个reducer纯函数;里面有两个形参 第一个是当前的state, 
//第二个是当前的action  可以解构 有type、payload;
    会返回一个新的state作为当前的state, 进行替换
   const counter = (state, action) => {
      switch (action.type) {
             case 'name':
                return {}
            default:
                return state;
        }
    }
    const initState = { name:"zlc"} ,第二参数为初始值的state;
    let store = createStore(counter, initState);  最终生成store;

通过创建的store有4个API；

• store发生改变时触发这个函数：
  store.subscribe(() =>
  console.log(store.getState(), ‘subscribe’)
  )；

• 获取store中当前的状态：
  store.getState()；

• 修改store内部的状态{type:“class”,payload:“需要传递的值”}：
  store.dispatch({type:"" , payload:""})；

• 修改更新store里的reducer;
  store.replaceReducer(nextReducer) //替换更新当前的reducer

第三步： 由于redux和react-redux 的负责模块不一样，redux可以跨平台多复用

此时要用react-redux进行react组件关联，采用组件属性值的方式获取;

1. redux负责全局 store数据管理;
2. react-redux 负责react组件和redux进行关联绑定; 如果没有react-redux,在更新后store里的值后，react视图并不改变;

    import { Provider ,connect  } from 'react-redux'
     //最好是根组件进行包裹
     <Provider store={store}>
        <App/> 你的组件
     </Provider> 
     
     //某个需要关联的react组件 
    const HeaderContent = (props) => {
       return <div className={cls.headerTitle}>
          <div className={cls.item}>
              go back
          </div>
          <div className={cls.center}>
              {props.component}
          </div>
          <div className={cls.item}>
              user:{props.userName}
          </div>
      </div>
     }
     //进行组件的关联 使用引入进来的connect()()	
      export default connect(state => {
          return { component: state.component, userName: state.userName }
      })(HeaderContent)

1. <Provider> 它是整个redux应用的顶层组件  <Provider store={store}> 进行关联redux 中的store;
2.  connect((state)=>{ return { 组件属性名：state底下之后的属性值    } })(要关联的组件)
在dispatch触发某个type而更改reducer内部返回的state值时，可以影响受关联组件的属性更新;

第四步：打包后静态资源链接的访问可以更改

  "name": "lance",
  "version": "0.1.0",
  "private": true,
  "homepage": "./", //在这里修改打包后的静态资源访问
  "dependencies": {
    "@testing-library/jest-dom": "5.11.4",
    "@testing-library/react": "11.1.0",
    "@testing-library/user-event": "12.1.10",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-redux": "7.2.3",
    "react-scripts": "4.0.3",

Mongodb的连接和启动

1. 下载安装好mongodb ；
2. 配置windows系统变量的path路径为mongodb的bin文件夹路径方便执行日后的mongod --dbpath your db path；
3. 可以下载 robo 3t 进行数据库管理；
4. 可以下载 mongodb 管理工具 进行数据管理 管理工具链接
5. 进入管理工具导入数据时可以将excel 转换为CSV 文件 使用逗号分隔文件 进行导入数据
6. 跨域访问node时需要使用

app.all('*', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
  res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
  res.header("X-Powered-By",' 3.2.1')
  if(req.method=="OPTIONS") res.send(200);/*让options请求快速返回*/
  else  next();
})